/* ═══════════════════════════════════════════════════════════════ CASEBUZZ BRAND SYSTEM v2 — Global Stylesheet Loads on every page: theme pages, Elementor pages, Masteriyo pages, WooCommerce pages. ═══════════════════════════════════════════════════════════════ */ :root { /* ── Light base — navy is INK / ACCENT, not background ── */ --cb-paper: #F4F7FE; --cb-paper-2: #EAF0FF; --cb-white: #FFFFFF; --cb-sky: #E9F0FF; --cb-sky-2: #D8E4FF; /* ── Navy / Royal Blue family (primary brand) ── */ --cb-navy: #0B1E5B; --cb-navy-2: #0A1840; --cb-royal: #1E47E6; --cb-royal-2: #2F5BFF; --cb-electric: #5B82FF; --cb-electric-2: #88A6FF; /* ── Amber (RARE accent only) ── */ --cb-amber: #F5B800; --cb-amber-deep: #B88600; /* ── Ink, slate, mist for text ── */ --cb-ink: #0B1E5B; --cb-slate: #46506B; --cb-mist: #8089A0; --cb-line: #E2E8F5; --cb-line-2: #EEF2FB; /* ── Glass tokens ── */ --cb-glass: rgba(255,255,255,0.55); --cb-glass-2: rgba(255,255,255,0.7); --cb-glass-brd: rgba(255,255,255,0.8); --cb-glass-blur: blur(22px) saturate(135%); /* ── Fonts ── */ --cb-display: 'Nunito', 'Trebuchet MS', sans-serif; --cb-body: 'Roboto', 'Helvetica Neue', Arial, sans-serif; --cb-hand: 'Caveat', cursive; --cb-mono: 'Nunito', sans-serif; --cb-editorial: 'Fraunces', serif; /* ── Spacing (4pt grid) ── */ --cb-s1: 4px; --cb-s2: 8px; --cb-s3: 12px; --cb-s4: 16px; --cb-s5: 24px; --cb-s6: 32px; --cb-s7: 48px; --cb-s8: 64px; --cb-s9: 96px; --cb-s10: 128px; /* ── Radii ── */ --cb-r-sm: 8px; --cb-r-md: 14px; --cb-r-lg: 22px; --cb-r-xl: 30px; --cb-r-pill: 999px; /* ── Shadows ── */ --cb-shadow-sm: 0 4px 12px -4px rgba(11,30,91,0.12); --cb-shadow-md: 0 14px 40px -26px rgba(11,30,91,0.25); --cb-shadow-lg: 0 20px 50px -24px rgba(11,30,91,0.28); --cb-shadow-xl: 0 24px 60px -28px rgba(11,30,91,0.4); --cb-shadow-royal: 0 12px 28px -12px rgba(30,71,230,0.6); --cb-shadow-amber: 0 12px 28px -12px rgba(245,184,0,0.6); --cb-shadow-navy: 0 12px 28px -12px rgba(11,30,91,0.6); } /* ═══════════════════════════════════════════════════════════════ BASE ═══════════════════════════════════════════════════════════════ */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--cb-body); background: var(--cb-paper); color: var(--cb-ink); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* Ambient gradient mesh background — signature CaseBuzz look */ body::before { content: ''; position: fixed; inset: 0; z-index: -2; background: radial-gradient(60vw 60vw at 12% -5%, rgba(91,130,255,0.18), transparent 60%), radial-gradient(50vw 50vw at 100% 8%, rgba(30,71,230,0.14), transparent 55%), radial-gradient(46vw 46vw at 85% 100%, rgba(136,166,255,0.16), transparent 60%), radial-gradient(40vw 40vw at 0% 90%, rgba(245,184,0,0.06), transparent 55%); pointer-events: none; } /* ═══════════════════════════════════════════════════════════════ TYPOGRAPHY ═══════════════════════════════════════════════════════════════ */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 { font-family: var(--cb-display); color: var(--cb-navy); font-weight: 600; letter-spacing: -0.022em; line-height: 1.04; } h1, .h1 { font-size: clamp(40px, 6.4vw, 78px); letter-spacing: -0.035em; line-height: 1.0; } h2, .h2 { font-size: clamp(34px, 5vw, 54px); letter-spacing: -0.03em; } h3, .h3 { font-size: clamp(24px, 3vw, 32px); } h4, .h4 { font-size: clamp(18px, 2.2vw, 22px); } p { color: var(--cb-slate); } a { color: var(--cb-royal); text-decoration: none; transition: color .2s ease; } a:hover { color: var(--cb-navy); } .mono { font-family: var(--cb-mono); font-weight: 700; letter-spacing: 0.12em; } .hand { font-family: var(--cb-hand); font-weight: 600; } .ed { font-family: var(--cb-editorial); font-style: italic; font-weight: 500; } .spark { display: inline-block; color: var(--cb-amber); line-height: 1; } .spark-r { color: var(--cb-royal); } .tilt-note { font-family: var(--cb-hand); font-weight: 700; color: var(--cb-royal); font-size: 1.05em; display: inline-block; transform: rotate(-4deg); } .tilt-note.amber { color: var(--cb-amber-deep); } /* ═══════════════════════════════════════════════════════════════ LAYOUT ═══════════════════════════════════════════════════════════════ */ .wrap, .cb-container { max-width: 1180px; margin: 0 auto; padding: 0 var(--cb-s6); } .wrap-narrow { max-width: 880px; margin: 0 auto; padding: 0 var(--cb-s6); } .sec, .cb-sec { padding: var(--cb-s9) 0; position: relative; } .sec + .sec, .cb-sec + .cb-sec { padding-top: var(--cb-s7); } @media (max-width: 768px) { .sec, .cb-sec { padding: var(--cb-s7) 0; } } /* Grids */ .grid { display: grid; gap: var(--cb-s5); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 860px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } @media (min-width: 860px) and (max-width: 1100px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } } .stack > * + * { margin-top: var(--cb-s4); } .stack-lg > * + * { margin-top: var(--cb-s6); } /* Tilts */ .tilt-1 { transform: rotate(-3deg); } .tilt-2 { transform: rotate(2.5deg); } .tilt-3 { transform: rotate(-1.5deg); } .tilt-4 { transform: rotate(-6deg); } .tilt-5 { transform: rotate(4.5deg); } /* ═══════════════════════════════════════════════════════════════ EYEBROW ═══════════════════════════════════════════════════════════════ */ .eyebrow { display: inline-flex; align-items: center; gap: var(--cb-s2); font-family: var(--cb-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cb-royal); margin-bottom: var(--cb-s4); } .eyebrow::before { content: none; } .eyebrow.amber { color: var(--cb-amber-deep); } .eyebrow.amber::before { background: var(--cb-amber); } .eyebrow.white { color: rgba(255,255,255,0.85); } .eyebrow.white::before { background: rgba(255,255,255,0.6); } /* ═══════════════════════════════════════════════════════════════ SECTION HEADINGS ═══════════════════════════════════════════════════════════════ */ .sec-title { font-size: clamp(34px, 5vw, 54px); letter-spacing: -0.03em; margin-bottom: var(--cb-s4); max-width: 14ch; } .sec-lede { font-family: var(--cb-body); font-size: 17px; color: var(--cb-slate); max-width: 56ch; margin-bottom: var(--cb-s7); line-height: 1.6; } /* ═══════════════════════════════════════════════════════════════ GLASSMORPHIC CARDS ═══════════════════════════════════════════════════════════════ */ .glass { background: var(--cb-glass); backdrop-filter: var(--cb-glass-blur); -webkit-backdrop-filter: var(--cb-glass-blur); border: 1px solid var(--cb-glass-brd); border-radius: var(--cb-r-lg); box-shadow: var(--cb-shadow-lg), inset 0 1px 0 rgba(255,255,255,0.6); } .glass-deep { background: rgba(255,255,255,0.4); backdrop-filter: blur(26px) saturate(140%); -webkit-backdrop-filter: blur(26px) saturate(140%); border: 1px solid rgba(255,255,255,0.7); border-radius: var(--cb-r-lg); box-shadow: var(--cb-shadow-xl), inset 0 1px 0 rgba(255,255,255,0.7); } .glass-tint { background: rgba(91,130,255,0.14); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.55); border-radius: var(--cb-r-lg); } .card { background: var(--cb-white); border: 1px solid var(--cb-line); border-radius: var(--cb-r-lg); box-shadow: var(--cb-shadow-md); } .card-pad { padding: var(--cb-s6); } .glass-pad { padding: var(--cb-s6); } /* ═══════════════════════════════════════════════════════════════ PILLS / BADGES ═══════════════════════════════════════════════════════════════ */ .pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--cb-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--cb-r-pill); background: var(--cb-sky); color: var(--cb-royal); border: 1px solid var(--cb-sky-2); } .pill.live { background: var(--cb-royal); color: #fff; border-color: var(--cb-royal); } .pill.amber { background: var(--cb-amber); color: var(--cb-navy); border-color: var(--cb-amber); } .pill.ghost { background: var(--cb-white); color: var(--cb-slate); border-color: var(--cb-line); } .pill.navy { background: var(--cb-navy); color: #fff; border-color: var(--cb-navy); } .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(255,255,255,0.25); } /* ═══════════════════════════════════════════════════════════════ BUTTONS ═══════════════════════════════════════════════════════════════ */ .btn, button.btn, .wp-block-button__link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--cb-display); font-weight: 600; font-size: 14px; padding: 13px 22px; border-radius: var(--cb-r-pill); cursor: pointer; text-decoration: none; border: none; transition: transform .18s, box-shadow .18s, background .18s; line-height: 1.2; white-space: nowrap; } .btn:hover { transform: translateY(-2px); } .btn-navy { background: var(--cb-navy); color: #fff; box-shadow: var(--cb-shadow-navy); } .btn-navy:hover { background: var(--cb-navy-2); color: #fff; } .btn-royal { background: var(--cb-royal); color: #fff; box-shadow: var(--cb-shadow-royal); } .btn-royal:hover { background: var(--cb-royal-2); color: #fff; } .btn-glass { background: var(--cb-glass-2); backdrop-filter: var(--cb-glass-blur); color: var(--cb-navy); border: 1px solid var(--cb-glass-brd); } .btn-glass:hover { background: var(--cb-white); } .btn-amber { background: var(--cb-amber); color: var(--cb-navy); box-shadow: var(--cb-shadow-amber); } .btn-amber:hover { filter: brightness(1.05); } .btn-outline { background: transparent; color: var(--cb-navy); border: 1.5px solid var(--cb-navy); } .btn-outline:hover { background: var(--cb-navy); color: #fff; } .btn-lg { font-size: 16px; padding: 16px 28px; } .btn-sm { font-size: 12px; padding: 9px 16px; } .btn-arrow { transition: transform .2s; } .btn:hover .btn-arrow { transform: translateX(3px); } /* ═══════════════════════════════════════════════════════════════ NAVIGATION HEADER ═══════════════════════════════════════════════════════════════ */ .cb-header { position: sticky; top: 0; z-index: 100; background: rgba(244,247,254,0.75); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--cb-line-2); } .cb-header-in { max-width: 1180px; margin: 0 auto; padding: 14px var(--cb-s6); display: flex; align-items: center; justify-content: space-between; gap: var(--cb-s5); } .cb-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; } .cb-brand .cb-logo { width: 150px; height: 33px; } .cb-brand .ver { font-family: var(--cb-mono); font-size: 10px; color: var(--cb-mist); border: 1px solid var(--cb-line); padding: 3px 8px; border-radius: var(--cb-r-pill); } .cb-nav { display: flex; align-items: center; gap: var(--cb-s5); } .cb-nav-links { display: flex; gap: var(--cb-s5); list-style: none; } .cb-nav-links a { font-family: var(--cb-body); font-size: 14px; font-weight: 500; color: var(--cb-slate); text-decoration: none; padding: 6px 0; position: relative; } .cb-nav-links a:hover { color: var(--cb-royal); } .cb-nav-links a.current, .cb-nav-links .current-menu-item > a { color: var(--cb-royal); } .cb-nav-links a.current::after, .cb-nav-links .current-menu-item > a::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: var(--cb-amber); border-radius: 999px; } .cb-nav-actions { display: flex; gap: var(--cb-s3); align-items: center; } .cb-cart-link { position: relative; color: var(--cb-navy); } .cb-cart-link .count { position: absolute; top: -6px; right: -8px; background: var(--cb-amber); color: var(--cb-navy); font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; padding: 0 4px; } /* Mobile menu toggle */ .cb-menu-toggle { display: none; background: transparent; border: none; width: 40px; height: 40px; cursor: pointer; color: var(--cb-navy); } .cb-menu-toggle svg { width: 24px; height: 24px; } @media (max-width: 920px) { .cb-nav-links { position: fixed; top: 72px; left: 0; right: 0; flex-direction: column; gap: var(--cb-s3); background: rgba(244,247,254,0.97); backdrop-filter: blur(20px); padding: var(--cb-s5); border-bottom: 1px solid var(--cb-line); transform: translateY(-130%); transition: transform .3s ease, visibility .3s ease; visibility: hidden; pointer-events: none; z-index: 150; } .cb-nav-links.open { transform: translateY(0); visibility: visible; pointer-events: auto; } .cb-menu-toggle { display: inline-flex; align-items: center; justify-content: center; } } /* Defensive: keep header height/padding consistent on every page, including Masteriyo/WooCommerce account & login templates, in case any plugin CSS tries to override it. */ .cb-header, .woocommerce-account .cb-header, .masteriyo-account-page .cb-header, .cb-lms-page .cb-header, .cb-lms .cb-header { min-height: 0; } .cb-header-in { min-height: 48px; box-sizing: border-box; width: 100%; max-width: 1200px; } body.cb-lms-page .cb-header-in, body.woocommerce-account .cb-header-in, body.masteriyo-account-page .cb-header-in, body.cb-lms .cb-header-in { padding: 14px var(--cb-s6) !important; flex-wrap: nowrap !important; } @media (max-width: 920px) { .cb-header-in { padding: 12px var(--cb-s5) !important; } } /* ═══════════════════════════════════════════════════════════════ BUZZ MASCOT + DOODLES ═══════════════════════════════════════════════════════════════ */ .bee { display: inline-block; width: 62px; height: 46px; vertical-align: middle; } @keyframes cb-beefloat { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-7px) rotate(3deg); } } .bee-float { animation: cb-beefloat 4.5s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .bee-float { animation: none; } } @keyframes cb-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.82); } } .twinkle { animation: cb-twinkle 3s ease-in-out infinite; } .twinkle.d1 { animation-delay: .6s; } .twinkle.d2 { animation-delay: 1.2s; } .twinkle.d3 { animation-delay: 1.8s; } /* Floating object animation */ @keyframes cb-floaty { 0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); } 50% { transform: translateY(-9px) rotate(calc(var(--rot, 0deg) + 3deg)); } } .float { animation: cb-floaty 5s ease-in-out infinite; } .float.s1 { animation-duration: 4.2s; animation-delay: .2s; } .float.s2 { animation-duration: 5.6s; animation-delay: .9s; } .float.s3 { animation-duration: 6.4s; animation-delay: 1.5s; } @media (prefers-reduced-motion: reduce) { .float { animation: none; } } .dood { position: absolute; pointer-events: none; } /* ═══════════════════════════════════════════════════════════════ BACKGROUND PATTERNS ═══════════════════════════════════════════════════════════════ */ .pat-dots { background-image: radial-gradient(rgba(30,71,230,0.10) 1.4px, transparent 1.4px); background-size: 22px 22px; } .pat-grid { background-image: linear-gradient(rgba(30,71,230,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(30,71,230,0.06) 1px, transparent 1px); background-size: 34px 34px; } .pat-diag { background-image: repeating-linear-gradient(45deg, rgba(30,71,230,0.045) 0 1px, transparent 1px 12px); } .pat-cross { background-image: radial-gradient(circle at center, rgba(245,184,0,0.14) 1.2px, transparent 1.3px); background-size: 30px 30px; } .blue-field { border-radius: var(--cb-r-lg); background: linear-gradient(135deg, var(--cb-royal), var(--cb-electric)); position: relative; overflow: hidden; color: #fff; } .blue-field::before { content: ''; position: absolute; inset: 0; background: radial-gradient(50% 60% at 15% 12%, rgba(255,255,255,0.18), transparent 60%), radial-gradient(40% 50% at 90% 90%, rgba(255,255,255,0.14), transparent 60%); pointer-events: none; } .navy-field { border-radius: var(--cb-r-lg); background: linear-gradient(135deg, var(--cb-navy), var(--cb-navy-2)); color: #fff; position: relative; overflow: hidden; } /* ═══════════════════════════════════════════════════════════════ COURSE CARDS ═══════════════════════════════════════════════════════════════ */ .cb-course-card { background: var(--cb-white); border: 1px solid var(--cb-line); border-radius: var(--cb-r-lg); overflow: hidden; box-shadow: var(--cb-shadow-md); transition: transform .25s ease, box-shadow .25s ease; display: flex; flex-direction: column; } .cb-course-card:hover { transform: translateY(-4px); box-shadow: var(--cb-shadow-lg); } .cb-course-thumb { position: relative; aspect-ratio: 16 / 10; background: var(--cb-sky); overflow: hidden; } .cb-course-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .cb-course-card:hover .cb-course-thumb img { transform: scale(1.06); } .cb-course-thumb .cb-badge { position: absolute; top: var(--cb-s3); left: var(--cb-s3); } .cb-course-body { padding: var(--cb-s5); display: flex; flex-direction: column; gap: var(--cb-s3); flex: 1; } .cb-course-cat { font-family: var(--cb-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--cb-royal); text-transform: uppercase; } .cb-course-title { font-family: var(--cb-display); font-weight: 700; font-size: 19px; line-height: 1.25; color: var(--cb-navy); letter-spacing: -0.015em; } .cb-course-title a { color: inherit; } .cb-course-meta { display: flex; align-items: center; gap: var(--cb-s3); font-size: 13px; color: var(--cb-mist); } .cb-course-meta .dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--cb-mist); } .cb-course-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: var(--cb-s3); border-top: 1px solid var(--cb-line-2); } .cb-course-price { font-family: var(--cb-display); font-weight: 700; font-size: 22px; color: var(--cb-navy); } .cb-course-price .old { font-size: 14px; color: var(--cb-mist); text-decoration: line-through; margin-right: 6px; } .cb-course-cta { font-family: var(--cb-mono); font-size: 11px; font-weight: 700; color: var(--cb-royal); text-transform: uppercase; letter-spacing: 0.1em; } /* ═══════════════════════════════════════════════════════════════ FORMS ═══════════════════════════════════════════════════════════════ */ .cb-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--cb-s4); } .cb-field label { font-family: var(--cb-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cb-slate); font-weight: 600; } .cb-field input, .cb-field textarea, .cb-field select, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="search"], textarea, select { font-family: var(--cb-body); font-size: 15px; padding: 12px 16px; border: 1px solid var(--cb-line); border-radius: var(--cb-r-md); background: var(--cb-white); color: var(--cb-ink); transition: border-color .2s, box-shadow .2s; width: 100%; } .cb-field input:focus, .cb-field textarea:focus, .cb-field select:focus, input:focus, textarea:focus, select:focus { outline: none; border-color: var(--cb-royal); box-shadow: 0 0 0 4px rgba(30,71,230,0.12); } /* ═══════════════════════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════════════════════ */ .cb-footer { margin-top: var(--cb-s8); padding: var(--cb-s9) 0 var(--cb-s7); position: relative; overflow: hidden; } .cb-foot-panel { border-radius: var(--cb-r-xl); padding: var(--cb-s8); background: linear-gradient(135deg, var(--cb-navy), var(--cb-navy-2)); color: #fff; position: relative; overflow: hidden; } .cb-foot-panel::before { content: ''; position: absolute; inset: 0; background: radial-gradient(40% 50% at 90% 0%, rgba(91,130,255,0.25), transparent 60%), radial-gradient(35% 45% at 0% 100%, rgba(245,184,0,0.12), transparent 60%); pointer-events: none; } .cb-foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--cb-s7); position: relative; z-index: 1; } @media (max-width: 860px) { .cb-foot-grid { grid-template-columns: 1fr 1fr; gap: var(--cb-s5); } } .cb-foot-panel h4 { color: rgba(255,255,255,0.9); font-size: 13px; font-family: var(--cb-mono); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--cb-s4); } .cb-foot-panel ul { list-style: none; display: flex; flex-direction: column; gap: 10px; } .cb-foot-panel ul a { color: rgba(255,255,255,0.7); font-size: 14px; text-decoration: none; } .cb-foot-panel ul a:hover { color: var(--cb-amber); } .cb-foot-tagline { font-family: var(--cb-editorial); font-style: italic; font-size: 18px; color: rgba(255,255,255,0.8); margin-top: var(--cb-s4); max-width: 32ch; line-height: 1.5; } .cb-foot-bottom { margin-top: var(--cb-s7); padding-top: var(--cb-s4); border-top: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: rgba(255,255,255,0.55); position: relative; z-index: 1; } /* ═══════════════════════════════════════════════════════════════ WOOCOMMERCE OVERRIDES ═══════════════════════════════════════════════════════════════ */ .woocommerce, .woocommerce-page { font-family: var(--cb-body); } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { background: var(--cb-white); border: 1px solid var(--cb-line); border-radius: var(--cb-r-lg); padding: var(--cb-s5) !important; box-shadow: var(--cb-shadow-md); } .woocommerce ul.products li.product h2, .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--cb-display) !important; color: var(--cb-navy) !important; font-weight: 700 !important; font-size: 18px !important; } .woocommerce ul.products li.product .price { color: var(--cb-navy) !important; font-family: var(--cb-display) !important; font-weight: 700 !important; } .woocommerce a.button, .woocommerce-page a.button, .woocommerce button.button, .woocommerce-page button.button, .woocommerce input.button, .woocommerce-page input.button, .woocommerce a.button.alt, .woocommerce-page a.button.alt { background: var(--cb-royal) !important; color: #fff !important; border-radius: var(--cb-r-pill) !important; padding: 12px 22px !important; font-family: var(--cb-display) !important; font-weight: 600 !important; font-size: 14px !important; border: none !important; box-shadow: var(--cb-shadow-royal); text-transform: none !important; letter-spacing: 0 !important; } .woocommerce a.button:hover, .woocommerce-page a.button:hover, .woocommerce button.button:hover, .woocommerce-page button.button:hover { background: var(--cb-royal-2) !important; transform: translateY(-2px); } /* Cart / Checkout */ .woocommerce table.shop_table, .woocommerce-cart table.cart { background: var(--cb-white); border-radius: var(--cb-r-lg) !important; border: 1px solid var(--cb-line) !important; overflow: hidden; } .woocommerce-cart table.cart th { font-family: var(--cb-mono); font-size: 11px; letter-spacing: 0.1em; } .woocommerce-checkout .checkout { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--cb-s6); } @media (max-width: 860px) { .woocommerce-checkout .checkout { grid-template-columns: 1fr; } } /* Messages */ .woocommerce-message, .woocommerce-info, .woocommerce-error { background: var(--cb-glass-2) !important; backdrop-filter: var(--cb-glass-blur); border: 1px solid var(--cb-glass-brd) !important; border-left: 4px solid var(--cb-royal) !important; border-radius: var(--cb-r-md) !important; color: var(--cb-navy) !important; } .woocommerce-error { border-left-color: #DC2626 !important; } .woocommerce-message { border-left-color: var(--cb-amber) !important; } /* ═══════════════════════════════════════════════════════════════ MASTERIYO OVERRIDES (generic, fallback) ═══════════════════════════════════════════════════════════════ */ .masteriyo, .masteriyo-page, [class*="masteriyo-"] { font-family: var(--cb-body); } .masteriyo-courses-grid, .masteriyo-courses__list { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: var(--cb-s5) !important; } @media (max-width: 1100px) { .masteriyo-courses-grid, .masteriyo-courses__list { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 700px) { .masteriyo-courses-grid, .masteriyo-courses__list { grid-template-columns: 1fr !important; } } .masteriyo-course, .masteriyo-course-card { background: var(--cb-white) !important; border: 1px solid var(--cb-line) !important; border-radius: var(--cb-r-lg) !important; box-shadow: var(--cb-shadow-md); overflow: hidden; transition: transform .25s, box-shadow .25s; } .masteriyo-course:hover, .masteriyo-course-card:hover { transform: translateY(-4px); box-shadow: var(--cb-shadow-lg); } .masteriyo-course .masteriyo-course-title, .masteriyo-course__title { font-family: var(--cb-display) !important; color: var(--cb-navy) !important; font-weight: 700 !important; } .masteriyo-course .masteriyo-btn, .masteriyo-btn--primary, .masteriyo-btn-primary { background: var(--cb-royal) !important; color: #fff !important; border: none !important; border-radius: var(--cb-r-pill) !important; padding: 12px 22px !important; font-family: var(--cb-display) !important; font-weight: 600 !important; } /* ═══════════════════════════════════════════════════════════════ ELEMENTOR INTEGRATION ═══════════════════════════════════════════════════════════════ */ .elementor-button { font-family: var(--cb-display) !important; font-weight: 600 !important; border-radius: var(--cb-r-pill) !important; } .elementor-widget-heading h1, .elementor-widget-heading h2, .elementor-widget-heading h3 { font-family: var(--cb-display) !important; color: var(--cb-navy) !important; letter-spacing: -0.022em !important; } /* ═══════════════════════════════════════════════════════════════ UTILITIES ═══════════════════════════════════════════════════════════════ */ .text-center { text-align: center; } .text-right { text-align: right; } .text-navy { color: var(--cb-navy); } .text-royal { color: var(--cb-royal); } .text-amber { color: var(--cb-amber-deep); } .text-slate { color: var(--cb-slate); } .text-mist { color: var(--cb-mist); } .text-white { color: #fff; } .bg-paper { background: var(--cb-paper); } .bg-paper-2 { background: var(--cb-paper-2); } .bg-white { background: var(--cb-white); } .bg-sky { background: var(--cb-sky); } .flex { display: flex; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .gap-2 { gap: var(--cb-s2); } .gap-3 { gap: var(--cb-s3); } .gap-4 { gap: var(--cb-s4); } .gap-5 { gap: var(--cb-s5); } .gap-6 { gap: var(--cb-s6); } .mt-s1 { margin-top: var(--cb-s1); } .mt-s2 { margin-top: var(--cb-s2); } .mt-s3 { margin-top: var(--cb-s3); } .mt-s4 { margin-top: var(--cb-s4); } .mt-s5 { margin-top: var(--cb-s5); } .mt-s6 { margin-top: var(--cb-s6); } .mt-s7 { margin-top: var(--cb-s7); } .mt-s8 { margin-top: var(--cb-s8); } .full-bleed { width: 100%; max-width: 100% !important; } ::selection { background: var(--cb-royal); color: #fff; } /* ═══════════════════════════════════════════════════════════════ COMPONENT: NUMBERED STEPS (for "How it works") ═══════════════════════════════════════════════════════════════ */ .cb-step { background: var(--cb-white); border: 1px solid var(--cb-line); border-radius: var(--cb-r-lg); padding: var(--cb-s6); position: relative; box-shadow: var(--cb-shadow-md); } .cb-step-num { width: 48px; height: 48px; background: linear-gradient(135deg, var(--cb-royal), var(--cb-electric)); color: #fff; border-radius: 50%; display: grid; place-items: center; font-family: var(--cb-display); font-weight: 800; font-size: 22px; margin-bottom: var(--cb-s4); box-shadow: var(--cb-shadow-royal); } .cb-step h3 { font-size: 22px; margin-bottom: var(--cb-s3); } .cb-step p { color: var(--cb-slate); font-size: 15px; line-height: 1.6; } /* ═══════════════════════════════════════════════════════════════ COMPONENT: TESTIMONIAL ═══════════════════════════════════════════════════════════════ */ .cb-testimonial { padding: var(--cb-s7); border-radius: var(--cb-r-lg); background: var(--cb-glass); backdrop-filter: var(--cb-glass-blur); border: 1px solid var(--cb-glass-brd); box-shadow: var(--cb-shadow-lg); } .cb-testimonial blockquote { font-family: var(--cb-editorial); font-style: italic; font-weight: 500; font-size: 22px; line-height: 1.5; color: var(--cb-navy); margin-bottom: var(--cb-s5); } .cb-testimonial-author { display: flex; align-items: center; gap: var(--cb-s3); } .cb-testimonial-author img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--cb-amber); } .cb-testimonial-author .name { font-family: var(--cb-display); font-weight: 700; color: var(--cb-navy); } .cb-testimonial-author .role { font-size: 13px; color: var(--cb-mist); } /* ═══════════════════════════════════════════════════════════════ COMPONENT: STAT ═══════════════════════════════════════════════════════════════ */ .cb-stat { text-align: center; padding: var(--cb-s5); } .cb-stat .num { font-family: var(--cb-display); font-weight: 800; font-size: 48px; color: var(--cb-navy); letter-spacing: -0.03em; line-height: 1; } .cb-stat .label { font-family: var(--cb-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cb-mist); margin-top: var(--cb-s2); } /* ═══════════════════════════════════════════════════════════════ COMPONENT: PROGRESS RING ═══════════════════════════════════════════════════════════════ */ .cb-progress-ring { position: relative; width: 56px; height: 56px; } .cb-progress-ring svg { transform: rotate(-90deg); } .cb-progress-ring .bg { stroke: var(--cb-line); fill: none; stroke-width: 4; } .cb-progress-ring .fg { stroke: var(--cb-royal); fill: none; stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset .5s; } .cb-progress-ring .val { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--cb-display); font-weight: 700; font-size: 13px; color: var(--cb-navy); } /* ═══════════════════════════════════════════════════════════════ ACCESSIBILITY ═══════════════════════════════════════════════════════════════ */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } :focus-visible { outline: 3px solid var(--cb-royal); outline-offset: 2px; } /* ═══════════════════════════════════════════════════════════════ PRINT ═══════════════════════════════════════════════════════════════ */ @media print { .cb-header, .cb-footer, .btn, .cb-nav-actions { display: none !important; } body::before { display: none; } body { background: white; } } /* ═══════════════════════════════════════════════════════════════ HOMEPAGE HERO (proper grid alignment) ═══════════════════════════════════════════════════════════════ */ .cb-hero { padding-top: var(--cb-s8); padding-bottom: var(--cb-s8); } .cb-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--cb-s8); align-items: center; } .cb-hero-text { position: relative; } .cb-hero-title { font-size: clamp(40px, 6.4vw, 76px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.0; margin-bottom: var(--cb-s5); } .cb-hero-finally { color: var(--cb-amber); font-size: 0.6em; font-weight: 700; display: inline-block; transform: rotate(-5deg); margin-left: 8px; } .cb-hero-lede { font-family: var(--cb-editorial); font-style: italic; font-size: clamp(18px, 2.2vw, 22px); line-height: 1.5; color: var(--cb-slate); max-width: 46ch; margin-bottom: var(--cb-s6); } .cb-hero-cta { display: flex; gap: var(--cb-s3); flex-wrap: wrap; } /* Right column */ .cb-hero-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 380px; overflow: visible; } .cb-hero-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 420px; height: 420px; max-width: 90%; background: radial-gradient(circle, rgba(91,130,255,0.20), transparent 70%); border-radius: 50%; z-index: 0; pointer-events: none; } .cb-hero-card { position: relative; z-index: 2; width: 100%; max-width: 380px; padding: var(--cb-s4); overflow: hidden; } .cb-hero-card-media { display: block; position: relative; aspect-ratio: 16/10; border-radius: var(--cb-r-md); background: linear-gradient(135deg, var(--cb-royal), var(--cb-electric)); display: grid; place-items: center; margin-bottom: var(--cb-s4); overflow: hidden; } .cb-hero-card-body { padding: 0 var(--cb-s2) var(--cb-s2); display: flex; flex-direction: column; gap: var(--cb-s2); } .cb-hero-card-title { font-family: var(--cb-display); font-weight: 700; font-size: 19px; line-height: 1.25; letter-spacing: -0.015em; color: var(--cb-navy); } .cb-hero-card-price { font-family: var(--cb-display); font-weight: 800; font-size: 24px; color: var(--cb-navy); letter-spacing: -0.02em; } .cb-hero-card-price del { font-size: 15px; color: var(--cb-mist); font-weight: 600; margin-right: 6px; } .cb-hero-card-price ins { text-decoration: none; } @media (max-width: 900px) { .cb-hero-grid { grid-template-columns: 1fr; gap: var(--cb-s7); } .cb-hero-visual { min-height: 320px; margin-top: var(--cb-s4); } } /* ═══════════════════════════════════════════════════════════════ ENHANCED GLASSMORPHISM (more pronounced, per brand direction) ═══════════════════════════════════════════════════════════════ */ .glass { background: linear-gradient(135deg, rgba(255,255,255,0.6), rgba(255,255,255,0.4)); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); border: 1px solid rgba(255,255,255,0.85); box-shadow: var(--cb-shadow-lg), inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 0 rgba(91,130,255,0.05); } .glass-deep { background: linear-gradient(150deg, rgba(255,255,255,0.55), rgba(233,240,255,0.35)); backdrop-filter: blur(30px) saturate(160%); -webkit-backdrop-filter: blur(30px) saturate(160%); border: 1px solid rgba(255,255,255,0.9); box-shadow: var(--cb-shadow-xl), inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -2px 8px rgba(91,130,255,0.04); } .glass-tint { background: linear-gradient(135deg, rgba(91,130,255,0.18), rgba(30,71,230,0.08)); backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); border: 1px solid rgba(255,255,255,0.6); box-shadow: var(--cb-shadow-md), inset 0 1px 0 rgba(255,255,255,0.7); } /* Course cards get a subtle glass-on-hover lift */ .cb-course-card { background: linear-gradient(160deg, rgba(255,255,255,0.92), rgba(255,255,255,0.82)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.9); } /* Glass on the sticky header strengthened */ .cb-header { background: linear-gradient(180deg, rgba(244,247,254,0.85), rgba(244,247,254,0.65)); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); } /* Pills get a touch of glass */ .pill:not(.live):not(.amber):not(.navy) { background: rgba(255,255,255,0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* ═══════════════════════════════════════════════════════════════ COURSE DETAIL PAGE ═══════════════════════════════════════════════════════════════ */ .cb-breadcrumb { margin-bottom: var(--cb-s5); font-family: var(--cb-body); font-size: 13px; color: var(--cb-mist); } .cb-breadcrumb a { color: var(--cb-mist); } .cb-breadcrumb a:hover { color: var(--cb-royal); } .cb-breadcrumb .sep { margin: 0 8px; color: var(--cb-line); } .cb-breadcrumb .current { color: var(--cb-navy); font-weight: 600; } .cb-course-layout { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--cb-s7); align-items: start; } .cb-course-h1 { font-size: clamp(32px, 4.6vw, 50px); letter-spacing: -0.03em; line-height: 1.06; margin-bottom: var(--cb-s4); } .cb-course-excerpt { font-family: var(--cb-editorial); font-style: italic; font-size: 20px; line-height: 1.5; color: var(--cb-slate); margin-bottom: var(--cb-s5); } .cb-course-instructor { display: flex; align-items: center; gap: var(--cb-s3); padding: var(--cb-s3) var(--cb-s4); margin-bottom: var(--cb-s6); border-radius: var(--cb-r-md); } .cb-instructor-avatar { border-radius: 50%; border: 2px solid var(--cb-amber); } .cb-instructor-label { font-family: var(--cb-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cb-mist); margin-bottom: 2px; } .cb-instructor-name { font-family: var(--cb-display); font-weight: 700; color: var(--cb-navy); } .cb-course-desc { padding: var(--cb-s6); font-size: 16px; line-height: 1.7; color: var(--cb-slate); } .cb-course-desc h2, .cb-course-desc h3 { color: var(--cb-navy); margin: var(--cb-s5) 0 var(--cb-s3); } /* Enroll card */ .cb-course-aside { position: sticky; top: 100px; } .cb-enroll-card { padding: var(--cb-s4); overflow: hidden; } .cb-enroll-media { margin-bottom: var(--cb-s4); } .cb-enroll-thumb, .cb-enroll-thumb-fallback { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--cb-r-md); display: block; } .cb-enroll-thumb-fallback { background: linear-gradient(135deg, var(--cb-royal), var(--cb-electric)); display: grid; place-items: center; } .cb-enroll-price { font-family: var(--cb-display); font-weight: 800; font-size: 32px; color: var(--cb-navy); letter-spacing: -0.02em; padding: 0 var(--cb-s2); margin-bottom: var(--cb-s4); } .cb-enroll-price del { font-size: 18px; color: var(--cb-mist); font-weight: 600; margin-right: 8px; } .cb-enroll-price ins { text-decoration: none; } .cb-enroll-action { margin-bottom: var(--cb-s5); } /* Force Masteriyo's enroll button into our brand button */ .cb-enroll-action .masteriyo-btn, .cb-enroll-action button[type="submit"], .cb-enroll-action .masteriyo-enroll-btn, .cb-enroll-action a.masteriyo-btn-primary, .cb-enroll-action input[type="submit"] { display: flex !important; width: 100% !important; justify-content: center !important; align-items: center !important; background: var(--cb-royal) !important; color: #fff !important; border: none !important; border-radius: var(--cb-r-pill) !important; padding: 15px 28px !important; font-family: var(--cb-display) !important; font-weight: 700 !important; font-size: 16px !important; box-shadow: var(--cb-shadow-royal); cursor: pointer; text-decoration: none; transition: transform .18s, background .18s; } .cb-enroll-action .masteriyo-btn:hover, .cb-enroll-action button[type="submit"]:hover { background: var(--cb-royal-2) !important; transform: translateY(-2px); } .cb-enroll-features { list-style: none; padding: var(--cb-s4) var(--cb-s2) 0; border-top: 1px solid var(--cb-line-2); display: flex; flex-direction: column; gap: 10px; } .cb-enroll-features li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--cb-slate); } .cb-check { color: var(--cb-amber); font-weight: 700; } @media (max-width: 900px) { .cb-course-layout { grid-template-columns: 1fr; } .cb-course-aside { position: static; } } /* Masteriyo account/learning-area style overrides removed — let Masteriyo render its React dashboard with its own layout. Only the branded header lockdown (V17 block at end of file) and WooCommerce My Account styling below are preserved. */ /* ── WooCommerce My Account (login/register) brand styling ── */ .woocommerce-account .woocommerce { max-width: 1100px; margin: 0 auto; } .woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; } .woocommerce-account .woocommerce-MyAccount-navigation ul li a { display: block; padding: 12px 18px; border-radius: var(--cb-r-md); font-family: var(--cb-display); font-weight: 600; color: var(--cb-slate); background: var(--cb-glass); border: 1px solid var(--cb-glass-brd); } .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a, .woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover { background: var(--cb-royal); color: #fff; } /* ═══════════════════════════════════════════════════════════════ LOGIN / REGISTER PAGE ═══════════════════════════════════════════════════════════════ */ .cb-auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cb-s6); align-items: stretch; } .cb-auth-welcome { padding: var(--cb-s7); position: relative; display: flex; flex-direction: column; justify-content: center; } .cb-auth-bee { position: absolute; top: var(--cb-s5); right: var(--cb-s5); } .cb-auth-welcome-title { color: #fff; font-size: clamp(28px, 3.5vw, 40px); letter-spacing: -0.025em; line-height: 1.1; margin-bottom: var(--cb-s4); } .cb-auth-welcome-text { font-family: var(--cb-editorial); font-style: italic; font-size: 17px; color: rgba(255,255,255,0.85); line-height: 1.5; margin-bottom: var(--cb-s5); } .cb-auth-perks { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--cb-s3); } .cb-auth-perks li { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,0.92); font-size: 15px; } .cb-auth-forms { padding: var(--cb-s7); } .cb-auth-tabs { display: flex; gap: var(--cb-s2); background: var(--cb-line-2); padding: 5px; border-radius: var(--cb-r-pill); margin-bottom: var(--cb-s6); } .cb-auth-tab { flex: 1; padding: 11px; border: none; background: transparent; font-family: var(--cb-display); font-weight: 700; font-size: 14px; color: var(--cb-slate); cursor: pointer; border-radius: var(--cb-r-pill); transition: all .2s; } .cb-auth-remember { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cb-slate); margin-top: var(--cb-s2); } .cb-auth-foot { text-align: center; margin-top: var(--cb-s4); font-size: 14px; } .cb-auth-note { font-size: 13px; color: var(--cb-mist); line-height: 1.5; } @media (max-width: 820px) { .cb-auth-grid { grid-template-columns: 1fr; } .cb-auth-welcome { display: none; } } /* Masteriyo account alignment overrides removed — see V17 note. */ /* ═══════════════════════════════════════════════════════════════ HOMEPAGE v2 — sections ═══════════════════════════════════════════════════════════════ */ .cb-sec-head { margin-bottom: var(--cb-s7); max-width: 720px; } /* ── HERO ── */ .cb-hero { padding-top: var(--cb-s8); padding-bottom: var(--cb-s8); } .cb-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--cb-s7); align-items: center; } .cb-hero-title { font-size: clamp(42px, 6.2vw, 76px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.0; margin-bottom: var(--cb-s5); } .cb-hero-lede { font-family: var(--cb-editorial); font-style: italic; font-size: clamp(18px, 2.2vw, 23px); line-height: 1.5; color: var(--cb-slate); max-width: 42ch; margin-bottom: var(--cb-s6); } .cb-hero-cta { display: flex; gap: var(--cb-s3); flex-wrap: wrap; } .cb-hero-visual { position: relative; min-height: 440px; display: flex; align-items: center; justify-content: center; } .cb-hero-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 440px; height: 440px; max-width: 92%; background: radial-gradient(circle, rgba(91,130,255,0.22), transparent 70%); border-radius: 50%; z-index: 0; } .cb-hero-trophy { position: relative; z-index: 2; --rot: -2deg; } .cb-hero-laptop { position: absolute; bottom: 40px; left: 8%; z-index: 3; padding: 12px; border-radius: var(--cb-r-md); --rot: -5deg; } .cb-hero-frame { position: absolute; top: 30px; right: 6%; z-index: 3; padding: 14px; border-radius: var(--cb-r-md); width: 110px; --rot: 5deg; } .cb-hero-frame-row { display: flex; gap: 5px; margin-bottom: 5px; } .cb-hero-frame-row span { flex: 1; height: 26px; border-radius: 5px; background: var(--cb-sky-2); } .cb-hero-frame-row:first-child span:first-child { background: var(--cb-royal); } .cb-hero-frame-row:last-child span:last-child { background: var(--cb-amber); } .cb-hero-frame-label { font-size: 8px; color: var(--cb-mist); letter-spacing: 0.12em; margin-top: 6px; text-align: center; } .cb-hero-spark-1 { position: absolute; top: 14%; left: 12%; font-size: 22px; z-index: 4; } .cb-hero-spark-2 { position: absolute; bottom: 18%; right: 16%; font-size: 18px; color: var(--cb-royal); z-index: 4; } @media (max-width: 900px) { .cb-hero-grid { grid-template-columns: 1fr; gap: var(--cb-s6); } .cb-hero-visual { min-height: 320px; } } /* ── WHAT'S INSIDE ── */ .cb-inside-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cb-s5); } .cb-inside-card { padding: var(--cb-s6); border-radius: var(--cb-r-lg); transition: transform .25s ease, box-shadow .25s ease; } .cb-inside-card:hover { transform: translateY(-5px); box-shadow: var(--cb-shadow-xl); } .cb-inside-num { font-size: 13px; color: var(--cb-royal); letter-spacing: 0.12em; margin-bottom: var(--cb-s4); } .cb-inside-title { font-size: 21px; margin-bottom: var(--cb-s3); letter-spacing: -0.02em; } .cb-inside-text { font-size: 15px; color: var(--cb-slate); line-height: 1.55; } @media (max-width: 900px) { .cb-inside-grid { grid-template-columns: 1fr; } } /* ── MODULES (interactive) ── */ .cb-modules { display: grid; grid-template-columns: 340px 1fr; gap: var(--cb-s5); align-items: start; } .cb-modules-nav { display: flex; flex-direction: column; gap: 8px; } .cb-module-tab { display: flex; align-items: center; gap: var(--cb-s3); width: 100%; text-align: left; cursor: pointer; padding: 16px 18px; border-radius: var(--cb-r-md); background: transparent; border: 1px solid transparent; font-family: var(--cb-display); color: var(--cb-slate); transition: all .2s ease; } .cb-module-tab:hover { background: var(--cb-glass); border-color: var(--cb-glass-brd); } .cb-module-tab.active { background: var(--cb-royal); border-color: var(--cb-royal); box-shadow: var(--cb-shadow-royal); } .cb-module-tab.active .cb-module-tab-title, .cb-module-tab.active .cb-module-tab-num, .cb-module-tab.active .cb-module-tab-arrow { color: #fff; } .cb-module-tab-num { font-size: 12px; color: var(--cb-mist); letter-spacing: 0.1em; } .cb-module-tab-title { flex: 1; font-weight: 700; font-size: 15px; } .cb-module-tab-arrow { color: var(--cb-mist); font-size: 16px; transition: transform .2s; } .cb-module-tab.active .cb-module-tab-arrow { transform: translateX(2px); } .cb-modules-detail { padding: var(--cb-s7); min-height: 420px; position: relative; } .cb-module-panel { display: none; animation: cb-fade .35s ease; } .cb-module-panel.active { display: block; } @keyframes cb-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .cb-module-pill { margin-bottom: var(--cb-s4); background: var(--cb-sky); color: var(--cb-royal); text-transform: none; font-family: var(--cb-body); font-weight: 500; letter-spacing: 0; font-size: 13px; } .cb-module-title { font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -0.025em; margin-bottom: var(--cb-s4); } .cb-module-desc { font-size: 16px; line-height: 1.65; color: var(--cb-slate); margin-bottom: var(--cb-s5); max-width: 60ch; } .cb-module-points { list-style: none; display: flex; flex-direction: column; gap: var(--cb-s3); } .cb-module-points li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--cb-ink); } .cb-module-check { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: var(--cb-sky); color: var(--cb-royal); display: grid; place-items: center; font-size: 12px; font-weight: 700; margin-top: 1px; } @media (max-width: 900px) { .cb-modules { grid-template-columns: 1fr; } .cb-modules-nav { flex-direction: column; } .cb-modules-detail { min-height: auto; } } /* ── ABOUT ── */ .cb-about { padding: var(--cb-s8); border-radius: var(--cb-r-xl); position: relative; max-width: 860px; margin: 0 auto; text-align: center; } .cb-about-body { margin: var(--cb-s4) 0 var(--cb-s6); } .cb-about-body p { font-family: var(--cb-editorial); font-style: italic; font-size: clamp(19px, 2.6vw, 26px); line-height: 1.5; color: var(--cb-navy); margin-bottom: var(--cb-s4); } .cb-about-founders { font-family: var(--cb-body) !important; font-style: normal !important; font-size: 15px !important; color: var(--cb-slate) !important; font-weight: 500; } /* ── CONTACT ── */ .cb-contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cb-s5); } .cb-contact-card { padding: var(--cb-s6); border-radius: var(--cb-r-lg); text-decoration: none; text-align: center; transition: transform .25s ease, box-shadow .25s ease; } .cb-contact-card:hover { transform: translateY(-5px); box-shadow: var(--cb-shadow-xl); } .cb-contact-icon { width: 52px; height: 52px; margin: 0 auto var(--cb-s4); border-radius: 14px; background: linear-gradient(135deg, var(--cb-royal), var(--cb-electric)); color: #fff; display: grid; place-items: center; font-size: 22px; font-weight: 700; box-shadow: var(--cb-shadow-royal); } .cb-contact-label { font-size: 10px; color: var(--cb-mist); letter-spacing: 0.14em; margin-bottom: 6px; } .cb-contact-value { font-family: var(--cb-display); font-weight: 700; font-size: 16px; color: var(--cb-navy); } @media (max-width: 760px) { .cb-contact-grid { grid-template-columns: 1fr; } } /* reveal on scroll */ [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; transition-delay: var(--reveal-delay, 0ms); } [data-reveal].is-revealed { opacity: 1; transform: translateY(0); } /* ── MINIMAL FOOTER ── */ .cb-footer-min { padding: var(--cb-s8) 0 var(--cb-s6); margin-top: var(--cb-s8); border-top: 1px solid var(--cb-line-2); } .cb-footer-min-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--cb-s3); } .cb-footer-min-inner .cb-logo, .cb-footer-min-inner .custom-logo { width: 150px; height: auto; } .cb-footer-tagline { font-family: var(--cb-editorial); font-style: italic; font-size: 17px; color: var(--cb-slate); } .cb-footer-social { display: flex; align-items: center; gap: var(--cb-s3); font-size: 14px; flex-wrap: wrap; justify-content: center; } .cb-footer-social a { color: var(--cb-slate); text-decoration: none; } .cb-footer-social a:hover { color: var(--cb-royal); } .cb-footer-dot { color: var(--cb-line); } .cb-footer-copy { font-family: var(--cb-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--cb-mist); margin-top: var(--cb-s2); } /* ═══════════════════════════════════════════════════════════════ TICKER STRIP (below hero) ═══════════════════════════════════════════════════════════════ */ .cb-ticker { background: linear-gradient(90deg, var(--cb-navy) 0%, var(--cb-royal) 100%); overflow: hidden; padding: 14px 0; position: relative; border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); } .cb-ticker-track { display: inline-flex; align-items: center; gap: var(--cb-s5); white-space: nowrap; animation: cb-ticker-slide 32s linear infinite; will-change: transform; } .cb-ticker-item { font-family: var(--cb-editorial); font-style: italic; font-size: 16px; color: rgba(255,255,255,0.9); letter-spacing: 0.01em; } .cb-ticker-sep { color: var(--cb-amber); font-size: 14px; opacity: 0.9; } @keyframes cb-ticker-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } } .cb-ticker:hover .cb-ticker-track { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .cb-ticker-track { animation: none; } } /* ═══════════════════════════════════════════════════════════════ MODULE DETAIL — two-column with right-side deck visual ═══════════════════════════════════════════════════════════════ */ .cb-module-panel { display: none; animation: cb-fade .35s ease; } .cb-module-panel.active { display: grid !important; grid-template-columns: 1.15fr 1fr; gap: var(--cb-s6); align-items: center; } .cb-module-body { min-width: 0; } .cb-module-visual { position: relative; padding: var(--cb-s3); } .cb-module-visual-card { position: relative; border-radius: var(--cb-r-lg); overflow: hidden; background: var(--cb-white); border: 1px solid var(--cb-glass-brd); box-shadow: var(--cb-shadow-xl); transform: rotate(-2deg); transition: transform .35s ease, box-shadow .35s ease; } .cb-module-visual-card:hover { transform: rotate(0deg) scale(1.02); box-shadow: 0 30px 60px -20px rgba(11,30,91,0.35); } .cb-module-visual-card img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: cover; object-position: top center; } .cb-module-visual-cap { padding: 10px 14px; background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0.7)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); font-size: 10px; letter-spacing: 0.12em; color: var(--cb-slate); border-top: 1px solid var(--cb-line-2); } .cb-module-visual-note { position: absolute; bottom: -12px; right: 20px; font-size: 18px; color: var(--cb-amber-deep); transform: rotate(-4deg); background: var(--cb-paper); padding: 2px 10px; border-radius: var(--cb-r-pill); } @media (max-width: 900px) { .cb-module-panel.active { grid-template-columns: 1fr; } .cb-module-visual { padding: 0; margin-top: var(--cb-s4); } .cb-module-visual-card { transform: none; } } /* Masteriyo account page overrides removed — let Masteriyo render the dashboard with its own default layout. Only the header defensive lockdown (see V17 block at the end of this file) is preserved to keep the branded header consistent. */ /* ═══════════════════════════════════════════════════════════════ V9 REDESIGN — Hero/header centered, rest left-aligned per doc, scroll-jack gallery, laptop mockup, fixed module pill, lighter About section, breathing animations throughout. ═══════════════════════════════════════════════════════════════ */ /* ── Breathing pulse (used with .float for extra life) ── */ @keyframes cb-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } .breathe { animation: cb-breathe 3.6s ease-in-out infinite; } .breathe.float { animation: cb-floaty 5s ease-in-out infinite, cb-breathe 3.6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .breathe { animation: none; } } /* ── Hero (centered, background image) ── */ .cb-hero { position: relative; min-height: 88vh; display: flex; align-items: center; justify-content: center; padding-top: 0; padding-bottom: 0; background-image: url('../img/hero/desktop_bg_hero.jpeg'); background-size: cover; background-position: center; overflow: hidden; text-align: center; } .cb-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(244,247,254,0.1) 0%, rgba(244,247,254,0.3) 55%, rgba(244,247,254,0.65) 100%); pointer-events: none; } @media (max-width: 760px) { .cb-hero { background-image: url('../img/hero/Smartphones_bg_hero.jpeg'); min-height: 100vh; } } .cb-hero-inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; padding: 0 var(--cb-s5); text-align: center; } .cb-hero-eyebrow { justify-content: center; } .cb-hero-title { font-size: clamp(42px, 7vw, 84px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.0; margin-bottom: var(--cb-s5); text-align: center; } .cb-hero-title .accent { color: var(--cb-royal); } .cb-hero-lede { font-family: var(--cb-editorial); font-style: italic; font-size: clamp(18px, 2.2vw, 23px); color: var(--cb-slate); max-width: 46ch; margin: 0 auto var(--cb-s6); line-height: 1.5; text-align: center; } .cb-hero-cta { display: flex; gap: var(--cb-s3); justify-content: center; flex-wrap: wrap; } .cb-hero-scroll-hint { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 2; font-family: var(--cb-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--cb-slate); } .cb-hero-scroll-hint svg { animation: cb-bob 1.8s ease-in-out infinite; } @keyframes cb-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* ── Section 2: "No fluff" text + floating fanned deck stack ── */ .cb-fluff-sec { overflow: visible; padding-top: var(--cb-s7); padding-bottom: var(--cb-s7); } .cb-fluff-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cb-s7); align-items: center; } .cb-fluff-text { position: relative; max-width: 520px; } .cb-gallery-headline { font-size: clamp(28px, 4vw, 42px); letter-spacing: -0.03em; line-height: 1.15; margin-bottom: var(--cb-s3); } .cb-gallery-sub { font-size: 16px; color: var(--cb-slate); max-width: 46ch; } .cb-fluff-doodle-note { display: inline-block; margin-top: var(--cb-s5); font-size: 18px; color: var(--cb-amber-deep); transform: rotate(-2deg); } /* Deck stack */ .cb-deckstack-wrap { position: relative; display: flex; align-items: center; justify-content: center; min-height: 460px; } .cb-deckstack { position: relative; width: 100%; max-width: 480px; height: 340px; margin: 0 auto; } .cb-deckstack-card { position: absolute; top: 50%; left: 50%; width: 380px; border-radius: var(--cb-r-md); overflow: hidden; box-shadow: var(--cb-shadow-lg); transition: transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.45s ease; border: 4px solid #fff; } .cb-deckstack-card img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; display: block; } .cb-ds-back-l { transform: translate(-64%, -58%) rotate(-10deg); z-index: 1; } .cb-ds-back-r { transform: translate(-36%, -42%) rotate(9deg); z-index: 2; } .cb-ds-front { transform: translate(-50%, -50%) rotate(0deg); z-index: 3; width: 400px; box-shadow: var(--cb-shadow-xl); } /* Hover: stack spaces out */ .cb-deckstack-wrap:hover .cb-ds-back-l { transform: translate(-92%, -66%) rotate(-16deg); } .cb-deckstack-wrap:hover .cb-ds-back-r { transform: translate(-8%, -34%) rotate(15deg); } .cb-deckstack-wrap:hover .cb-ds-front { transform: translate(-50%, -50%) rotate(0deg) scale(1.04); z-index: 4; } /* Floating graphs / frameworks / icons around the stack */ .cb-deckstack-deco { position: absolute; inset: 0; pointer-events: none; overflow: visible; } .cb-dsd-item { position: absolute; opacity: 0.95; } .cb-dsd-1 { top: -6%; left: -8%; } .cb-dsd-2 { bottom: -4%; left: -10%; } .cb-dsd-3 { top: -8%; right: -6%; } .cb-dsd-4 { bottom: 2%; right: -10%; } .cb-dsd-spark-1 { position: absolute; top: 8%; right: 14%; font-size: 20px; } .cb-dsd-spark-2 { position: absolute; bottom: 10%; left: 18%; font-size: 16px; } @media (max-width: 900px) { .cb-fluff-layout { grid-template-columns: 1fr; gap: var(--cb-s6); } .cb-fluff-text { max-width: 100%; } .cb-deckstack-wrap { min-height: 340px; } .cb-deckstack { max-width: 340px; height: 250px; } .cb-deckstack-card { width: 260px; } .cb-ds-front { width: 280px; } .cb-dsd-item { transform: scale(0.75); } } @media (max-width: 600px) { .cb-dsd-1, .cb-dsd-2, .cb-dsd-3, .cb-dsd-4 { display: none; } } /* ── What's Inside: left aligned heading ── */ #whats-inside .cb-sec-head { text-align: left; max-width: 640px; margin: 0 0 var(--cb-s8); } #whats-inside .cb-sec-head .eyebrow { justify-content: flex-start; } .cb-inside-card { position: relative; overflow: visible; } .cb-inside-icon { position: absolute; top: -16px; right: 18px; width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(233,240,255,0.85)); border: 1px solid rgba(255,255,255,0.95); box-shadow: var(--cb-shadow-md); display: grid; place-items: center; z-index: 2; transition: transform .3s ease, box-shadow .3s ease; } .cb-inside-card:hover .cb-inside-icon { transform: scale(1.22) rotate(6deg); box-shadow: var(--cb-shadow-royal); } .cb-inside-title { padding-right: 50px; } /* ── Modules: fixed scoring pill sizing, breathing icon wrap ── */ .cb-module-icon-wrap { width: 100%; max-width: 320px; aspect-ratio: 4/3; border-radius: var(--cb-r-lg); display: grid; place-items: center; padding: var(--cb-s5); background: linear-gradient(150deg, rgba(255,255,255,0.75), rgba(233,240,255,0.55)); position: relative; overflow: hidden; box-shadow: var(--cb-shadow-md); margin: 0 auto; } .cb-module-visual { display: flex; flex-direction: column; align-items: center; } .cb-module-note { margin-top: var(--cb-s3); font-size: 15px; color: var(--cb-amber-deep); transform: rotate(-2deg); } /* ── About: left aligned, lighter blue, heavier glass, bigger logo ── */ .cb-about { position: relative; padding: var(--cb-s8) var(--cb-s8); border-radius: var(--cb-r-xl); overflow: hidden; background: linear-gradient(135deg, rgba(91,130,255,0.92) 0%, rgba(30,71,230,0.88) 100%); max-width: 1080px; margin: 0 auto; text-align: left; box-shadow: var(--cb-shadow-xl); backdrop-filter: blur(6px); } .cb-about::before { content: ''; position: absolute; inset: 0; background: radial-gradient(50% 60% at 8% 0%, rgba(255,255,255,0.22), transparent 60%), radial-gradient(45% 50% at 100% 100%, rgba(245,184,0,0.16), transparent 60%); pointer-events: none; } .cb-about-content { position: relative; z-index: 2; max-width: 640px; } .cb-about .eyebrow { color: rgba(255,255,255,0.92); justify-content: flex-start; } .cb-about-body p { font-family: var(--cb-body); font-style: normal; font-size: clamp(17px, 2.1vw, 20px); line-height: 1.7; color: rgba(255,255,255,0.95); margin-bottom: var(--cb-s4); } .cb-about-founders { font-size: 15px !important; color: rgba(255,255,255,0.72) !important; font-weight: 500; font-family: var(--cb-body) !important; font-style: normal !important; } /* Bigger floating logo mark, right side, glass card */ .cb-about-mark-wrap { position: absolute; top: 50%; right: var(--cb-s7); transform: translateY(-50%); width: 190px; height: 190px; background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); border-radius: 32px; display: grid; place-items: center; box-shadow: 0 30px 70px -20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.9); z-index: 3; border: 1px solid rgba(255,255,255,0.9); } .cb-about-mark-img { width: 108px; height: 108px; object-fit: contain; } .cb-about-deco-icon { position: absolute; z-index: 3; opacity: 0.95; } .cb-about-di-1 { top: 10%; right: 6%; } .cb-about-di-2 { bottom: 12%; right: 14%; } .cb-about-di-3 { top: 16%; left: 6%; } @media (max-width: 980px) { .cb-about { padding: var(--cb-s7) var(--cb-s5); } .cb-about-mark-wrap { position: relative; margin: 0 0 var(--cb-s5); right: auto; top: auto; transform: none; width: 130px; height: 130px; } .cb-about-mark-img { width: 76px; height: 76px; } .cb-about-di-1, .cb-about-di-2, .cb-about-di-3 { display: none; } } /* ── Contact: 5-card grid, real logos, breathing on hover assist ── */ .cb-contact-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--cb-s4); max-width: 1080px; margin: 0 auto; } .cb-contact-card { padding: var(--cb-s5) var(--cb-s4); text-align: center; transition: transform .25s ease, box-shadow .25s ease; display: flex; flex-direction: column; align-items: center; gap: 10px; } .cb-contact-card:hover { transform: translateY(-6px); box-shadow: var(--cb-shadow-xl); } .cb-contact-icon-img { width: 44px; height: 44px; object-fit: contain; } .cb-contact-icon-mail { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--cb-royal), var(--cb-electric)); color: #fff; display: grid; place-items: center; font-size: 19px; box-shadow: var(--cb-shadow-royal); } .cb-contact-value { word-break: break-word; } @media (max-width: 980px) { .cb-contact-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 620px) { .cb-contact-grid { grid-template-columns: repeat(2, 1fr); } } /* ── Contact + About section headings left aligned per doc ── */ .cb-contact-sec .cb-sec-head, .cb-modules-sec .cb-sec-head { text-align: left; max-width: 640px; margin: 0 0 var(--cb-s8); } .cb-contact-sec .cb-sec-head .eyebrow, .cb-modules-sec .cb-sec-head .eyebrow { justify-content: flex-start; } .cb-contact-sec .cb-contact-grid { text-align: center; } /* ═══════════════════════════════════════════════════════════════ V10 FIXES — hero weight, mobile text position, gallery spacing, no-crop images, real laptop shot, bigger transparent About mark, extra floating doodles. ═══════════════════════════════════════════════════════════════ */ /* ── Hero: reduce font boldness ── */ .cb-hero-title { font-weight: 700; } /* ── Mobile hero: instead of chasing an exact pixel position on a busy background (fragile — breaks differently on every phone height), give the text its own solid backdrop card. This reads clearly no matter where it lands on the artwork behind it. ── */ @media (max-width: 760px) { .cb-hero { align-items: flex-start; padding-top: 17vh; min-height: 100vh; } .cb-hero::after { background: linear-gradient(180deg, rgba(244,247,254,0.25) 0%, rgba(244,247,254,0.4) 55%, rgba(244,247,254,0.75) 100%); } .cb-hero-inner { padding: 28px 20px 32px; background: rgba(255,255,255,0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 24px; box-shadow: 0 20px 50px -20px rgba(11,30,91,0.25); } .cb-hero-title { font-size: clamp(32px, 7.5vw, 44px); margin-bottom: var(--cb-s3); } .cb-hero-lede { font-size: 15px; margin-bottom: var(--cb-s4); } .cb-hero-scroll-hint { bottom: 16px; } } /* ── About: transparent mark, 2x size, reliable vertical centering ── */ .cb-about { display: flex; align-items: center; justify-content: space-between; gap: var(--cb-s6); flex-wrap: wrap; } .cb-about-content { flex: 1 1 420px; max-width: 640px; } .cb-about-mark-wrap { position: relative; top: auto; right: auto; transform: none; flex-shrink: 0; width: 300px; height: 300px; background: rgba(255,255,255,0.97); backdrop-filter: blur(10px); border-radius: 40px; display: grid; place-items: center; box-shadow: 0 30px 70px -20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.9); z-index: 3; border: 1px solid rgba(255,255,255,0.9); margin-left: auto; } .cb-about-mark-img { width: 216px; height: 216px; object-fit: contain; } /* Deco icons repositioned to avoid colliding with eyebrow / content text */ .cb-about-di-1 { top: -10px; right: 40px; } .cb-about-di-2 { bottom: -8px; left: calc(100% - 260px); } @media (max-width: 980px) { .cb-about { flex-direction: column; text-align: left; } .cb-about-mark-wrap { width: 170px; height: 170px; margin: 0 0 var(--cb-s5) 0; } .cb-about-mark-img { width: 118px; height: 118px; } .cb-about-di-1, .cb-about-di-2 { display: none; } } /* ── Extra floating decor scattered per-section ── */ .cb-sec-deco { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 1; } .cb-deco-dots { position: absolute; top: 6%; right: 2%; } .cb-deco-spark-1 { position: absolute; top: 2%; left: 4%; font-size: 20px; } .cb-deco-squiggle { position: absolute; bottom: 4%; left: 1%; } .cb-deco-target { position: absolute; top: 4%; right: 3%; } .cb-deco-spark-2 { position: absolute; bottom: 8%; left: 3%; font-size: 18px; color: var(--cb-royal); } .cb-deco-envelope { position: absolute; top: 6%; left: 2%; } .cb-deco-spark-3 { position: absolute; bottom: 6%; right: 4%; font-size: 18px; } @media (max-width: 760px) { .cb-sec-deco { display: none; } } /* ═══════════════════════════════════════════════════════════════ V11 — Institute logos, extra glass cards, tilt utilities, doodles ═══════════════════════════════════════════════════════════════ */ /* ── About: institute logo row (circular frames, white bg) ── */ .cb-about-institutes { display: flex; align-items: center; gap: var(--cb-s3); margin-top: var(--cb-s4); } .cb-about-institute-logo { width: 56px; height: 56px; border-radius: 50%; background: #fff; display: grid; place-items: center; padding: 6px; box-shadow: var(--cb-shadow-md); flex-shrink: 0; transition: transform .25s ease; } .cb-about-institute-logo:hover { transform: translateY(-3px) scale(1.06); } .cb-about-institute-logo img { width: 100%; height: 100%; object-fit: contain; } /* ── About: extra floating glass blocks — plain, decorative only, tucked into corners so they never sit over text or the CTA ── */ .cb-about-minicard { position: absolute; z-index: 1; border-radius: var(--cb-r-md); pointer-events: none; } .cb-amc-1 { top: 18px; right: 22px; width: 64px; height: 40px; } .cb-amc-2 { bottom: 18px; right: 54px; width: 84px; height: 34px; } @media (max-width: 980px) { .cb-amc-1, .cb-amc-2 { display: none; } } /* ── Tilt utilities (for "more tilted blocks") ── */ .tilt-l { transform: rotate(-3deg); } .tilt-r { transform: rotate(3deg); } .tilt-l.float, .tilt-r.float { animation: cb-floaty-tilt 5.5s ease-in-out infinite; } @keyframes cb-floaty-tilt { 0%, 100% { transform: translateY(0) rotate(var(--tilt, 0deg)); } 50% { transform: translateY(-9px) rotate(calc(var(--tilt, 0deg) + 1.5deg)); } } .tilt-l { --tilt: -3deg; } .tilt-r { --tilt: 3deg; } /* ═══════════════════════════════════════════════════════════════ V13 — Showcase section: right-aligned deck + rich glass feature cards + doodles (replaces the earlier dual-anchor collage) ═══════════════════════════════════════════════════════════════ */ .cb-showcase-sec { overflow: visible; } .cb-showcase-collage { position: relative; max-width: 980px; margin: var(--cb-s7) auto 0; min-height: 440px; } /* Single tilted deck, right side, hover to straighten + lift */ .cb-showcase-deck-solo { position: absolute; top: 20px; right: 4%; width: 400px; border-radius: var(--cb-r-md); overflow: hidden; border: 4px solid #fff; box-shadow: var(--cb-shadow-xl); transform: rotate(5deg); transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.4s ease; z-index: 2; cursor: pointer; } .cb-showcase-deck-solo img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; display: block; } .cb-showcase-deck-solo:hover { transform: rotate(0deg) scale(1.05) translateY(-6px); box-shadow: 0 30px 60px -20px rgba(11,30,91,0.45); } /* Rich glass feature cards */ .cb-showcase-card { position: absolute; width: 240px; padding: var(--cb-s4) var(--cb-s4); border-radius: var(--cb-r-md); z-index: 3; transition: transform .3s ease, box-shadow .3s ease; } .cb-showcase-card:hover { animation-play-state: paused; transform: translateY(-6px) rotate(0deg); box-shadow: var(--cb-shadow-xl); } .cb-showcase-card .pill { margin-bottom: 10px; } .cb-showcase-card-title { font-family: var(--cb-display); font-weight: 800; font-size: 16px; color: var(--cb-navy); margin-bottom: 10px; letter-spacing: -0.01em; } .cb-showcase-card-sub { font-size: 13px; color: var(--cb-slate); line-height: 1.5; } .cb-showcase-card-a { top: 10px; left: 0; } .cb-showcase-card-b { top: 260px; left: 8%; } .cb-showcase-progress-block { margin-bottom: 12px; } .cb-showcase-progress-label { font-size: 9px; color: var(--cb-mist); letter-spacing: 0.1em; display: block; margin-bottom: 6px; } .cb-showcase-progress-bar { width: 100%; height: 8px; background: var(--cb-line); border-radius: var(--cb-r-pill); overflow: hidden; } .cb-showcase-progress-fill { width: 65%; height: 100%; background: linear-gradient(90deg, var(--cb-royal), var(--cb-electric-2)); border-radius: var(--cb-r-pill); } .cb-showcase-tags { display: flex; gap: 6px; flex-wrap: wrap; } /* Doodles scattered around the composition */ .cb-showcase-doodle { position: absolute; opacity: 0.9; } .cb-sd-1 { top: -10px; left: 30%; } .cb-sd-4 { bottom: 30px; right: 30%; } .cb-sd-2 { position: absolute; top: 60%; left: 42%; font-size: 20px; } .cb-sd-3 { position: absolute; bottom: -6px; right: 36%; font-size: 16px; } .cb-showcase-note { position: absolute; bottom: -14px; right: 8%; transform: rotate(-2deg); font-size: 17px; color: var(--cb-amber-deep); white-space: nowrap; z-index: 3; } @media (max-width: 900px) { .cb-showcase-collage { min-height: 640px; max-width: 100%; } .cb-showcase-deck-solo { width: 280px; right: 0; top: 0; } .cb-showcase-card-a { top: 260px; left: 0; } .cb-showcase-card-b { top: 440px; left: 4%; } .cb-showcase-note { bottom: auto; top: 610px; right: 4%; } .cb-sd-1, .cb-sd-4 { transform: scale(0.8); } } @media (max-width: 600px) { .cb-showcase-collage { min-height: 700px; } .cb-showcase-deck-solo { width: 240px; } .cb-showcase-card { width: 210px; } .cb-showcase-card-a { top: 240px; } .cb-showcase-card-b { top: 440px; } .cb-showcase-note { top: 640px; } .cb-sd-1, .cb-sd-4, .cb-sd-2, .cb-sd-3 { display: none; } } /* ═══════════════════════════════════════════════════════════════ V17 — Rollback of Masteriyo-content overrides (V14 + V16 + the dashboard-content portion of V15) per user request. Those blocks were fighting Masteriyo's own layout on the account/dashboard/ course-listing pages and doing more harm than good. Only the header lockdown from V15 is preserved below — that's what keeps the branded header intact when Chakra UI loads its global reset. ═══════════════════════════════════════════════════════════════ */ /* Chakra UI injects a global CSS reset the moment its React app mounts (only on pages that render the dashboard) — that reset can touch box-sizing/font metrics site-wide and drag our header out of alignment specifically on that page. Counter-lock the header's critical box model + typography with enough specificity to survive regardless of stylesheet load order. */ .cb-header, .cb-header *, .cb-header::before, .cb-header::after { box-sizing: border-box !important; } .cb-header { font-family: var(--cb-body) !important; line-height: normal !important; } .cb-logo { width: 160px !important; height: 39px !important; max-width: 160px !important; display: block !important; } .cb-nav-links a { font-size: 14px !important; font-weight: 500 !important; line-height: 1.4 !important; } .cb-header-in .btn { font-size: 15px !important; line-height: 1.2 !important; padding: 14px 26px !important; } .cb-header-in .btn-sm { padding: 10px 18px !important; font-size: 13px !important; } /* ═══════════════════════════════════════════════════════════════ V18 — Re-adding ONLY two narrow, text-level fixes after the V17 rollback: the sidebar email overflowing its box, and the course card's rating cluster (star + count) overflowing its box. Deliberately NOT touching any container's display/max-width/gap this time — those were the likely cause of the earlier sidebar vs. main-content overlap, not these text-overflow fixes. ═══════════════════════════════════════════════════════════════ */ /* Sidebar profile email: shrink + truncate with ellipsis instead of overflowing the little profile box in the top-left of the sidebar. */ h5.chakra-heading { font-size: 13px !important; font-weight: 500 !important; line-height: 1.4 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; max-width: 100% !important; display: block !important; } /* Course card author row (avatar + email): same truncation treatment, scoped only to a chakra-stack that actually contains an avatar — doesn't touch any other stack's layout on the page. */ .chakra-stack:has(.chakra-avatar) .chakra-text { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; min-width: 0 !important; flex: 1 1 auto !important; font-size: 13px !important; line-height: 1.4 !important; } .chakra-avatar { flex-shrink: 0 !important; } /* Course card boundary: clip anything (like the rating badge) that tries to spill past the card's own edge, instead of letting it overflow visibly. This only clips at the card's border — it does not change how anything inside is laid out. */ .masteriyo-course, .masteriyo-course-card, [class*="masteriyo-course-card"] { overflow: hidden !important; } /* Rating cluster (star + count): keep it inline and shrink to fit rather than forcing extra width that pushes past the card. */ [class*="rating"], [class*="star-rating"] { flex-shrink: 1 !important; min-width: 0 !important; max-width: 100% !important; white-space: nowrap !important; } /* ═══════════════════════════════════════════════════════════════ V22 — Full rollback of V19/V20/V21. Two attempts at tightening the "This Course Includes" spacing both risked (and one actually caused) the whole section becoming invisible. Removing every override for .masteriyo-course-highlights--item entirely — this guarantees Masteriyo's own default rendering shows the content, which is the priority. Spacing will be looser than ideal (extra gap from the

/

tags in the underlying content), but never invisible. See note below on the actual permanent fix for this. ═══════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════ V25 — Course single page banner: confirmed via live inspector. Masteriyo's own generated image size ("masteriyo_single") is 1584×992 — NOT 16:9 — and the display container additionally forces a fixed height:440px with object-fit:cover, which crops AGAIN on top of that at most viewport widths. Matching the aspect-ratio exactly to Masteriyo's own generated file (1584:992) means object-fit:cover has nothing left to crop, at any width. ═══════════════════════════════════════════════════════════════ */ .masteriyo-course--img-wrap img, .masteriyo-feature-img img { height: auto !important; aspect-ratio: 1584 / 992 !important; object-fit: cover !important; } /* Course title: was breaking mid-word ("Wi" / "nner") instead of at a space — that's the real bug, not just wrapping to 2 lines (a title this long will legitimately wrap on most screens no matter what, and that's fine as long as it breaks at word boundaries). */ .masteriyo-single-course--title, .masteriyo-course-title { word-break: normal !important; overflow-wrap: normal !important; font-size: clamp(24px, 4vw, 34px) !important; line-height: 1.3 !important; } /* ═══════════════════════════════════════════════════════════════ V27 — "Your Courses" card: back to vertical (thumbnail on top, details below) per follow-up request — the horizontal row left too much dead space with only one enrolled course. Multi-column grid resumes so cards sit side-by-side once there's more than one course, and the aspect-ratio lock stays so the thumbnail never reverts to the earlier stretch/crop bug. ═══════════════════════════════════════════════════════════════ */ .mto-enrolled-courses-list { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; } .mto-enrolled-course { display: flex !important; flex-direction: column !important; } .mto-enrolled-course figure { width: 100% !important; max-width: 100% !important; aspect-ratio: 1584 / 992 !important; overflow: hidden !important; margin: 0 !important; } .mto-enrolled-course figure img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 10px 10px 0 0 !important; } /* ═══════════════════════════════════════════════════════════════ V28 — "Easily digestible lectures" section (laptop + floating icons, electric-blue glass wrapper). Approved via HTML preview before implementation. ═══════════════════════════════════════════════════════════════ */ .cb-lectures2-sec { overflow: visible; } .cb-lec2-glasswrap { background: rgba(255,255,255,0.72); backdrop-filter: blur(26px) saturate(160%); -webkit-backdrop-filter: blur(26px) saturate(160%); border: 1px solid rgba(255,255,255,0.9); border-radius: 32px; padding: 64px; box-shadow: var(--cb-shadow-xl); position: relative; } .cb-lec2-layout { display: grid; grid-template-columns: 1.15fr 1fr; gap: 72px; align-items: center; } /* Laptop + floating icons */ .cb-lec2-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 440px; } .cb-lec2-laptop { position: relative; z-index: 3; width: 100%; max-width: 540px; filter: drop-shadow(0 30px 50px rgba(11,30,91,0.25)); transition: transform .4s cubic-bezier(.25,.46,.45,.94); } .cb-lec2-visual:hover .cb-lec2-laptop { transform: translateY(-6px) scale(1.015); } .cb-lec2-laptop img { width: 100%; display: block; } .cb-lec2-deco { position: absolute; z-index: 2; opacity: 0.95; } .cb-lec2-deco-1 { top: 2%; left: -4%; } .cb-lec2-deco-2 { bottom: 10%; left: -8%; } .cb-lec2-deco-3 { top: -2%; right: 2%; } .cb-lec2-deco-4 { bottom: 4%; right: -4%; } .cb-lec2-spark-1 { position: absolute; top: 14%; right: 16%; font-size: 20px; z-index: 2; } .cb-lec2-spark-2 { position: absolute; bottom: 22%; left: 8%; font-size: 16px; z-index: 2; } .cb-lec2-icon-card { background: linear-gradient(150deg, rgba(255,255,255,.85), rgba(233,240,255,.7)); border: 1px solid rgba(255,255,255,.9); border-radius: 16px; padding: 12px; box-shadow: var(--cb-shadow-lg); display: grid; place-items: center; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; } .cb-lec2-icon-card:hover { transform: translateY(-4px) scale(1.08); box-shadow: var(--cb-shadow-xl); } /* Right column text */ .cb-lec2-text { position: relative; } .cb-lec2-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--cb-display); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--cb-royal); margin-bottom: 16px; } .cb-lec2-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--cb-amber); } .cb-lec2-title { font-family: var(--cb-display); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; font-size: clamp(34px, 5vw, 54px); color: var(--cb-navy); margin: 0 0 20px; } .cb-lec2-sub { font-size: 17px; line-height: 1.7; color: var(--cb-slate); margin: 0 0 32px; max-width: 46ch; } .cb-lec2-features { list-style: none; margin: 0 0 36px; padding: 0; display: flex; flex-direction: column; gap: 18px; } .cb-lec2-features li { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; font-family: var(--cb-display); font-weight: 700; font-size: 16px; color: var(--cb-navy); } .cb-lec2-check { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--cb-sky); color: var(--cb-royal); display: grid; place-items: center; font-size: 13px; font-weight: 800; } /* Highlighter stripe effect */ .cb-lec2-highlight { position: relative; display: inline; z-index: 1; } .cb-lec2-highlight::before { content: ''; position: absolute; left: -4px; right: -4px; bottom: 1px; top: 38%; background: var(--cb-amber); opacity: .45; z-index: -1; transform: rotate(-1deg); border-radius: 3px 8px 5px 6px; } /* Floating institute logo badges */ .cb-lec2-institute-logos { display: inline-flex; align-items: center; gap: 8px; margin-left: 4px; } .cb-lec2-institute-logo { width: 48px; height: 48px; border-radius: 50%; background: #fff; display: grid; place-items: center; padding: 5px; box-shadow: var(--cb-shadow-md); flex-shrink: 0; transition: transform .25s ease; } .cb-lec2-institute-logo:hover { transform: translateY(-3px) scale(1.12); } .cb-lec2-institute-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; } .cb-lec2-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } @media (max-width: 900px) { .cb-lec2-layout { grid-template-columns: 1fr; gap: 48px; } .cb-lec2-visual { min-height: 320px; order: -1; } .cb-lec2-deco { transform: scale(0.75); } .cb-lec2-glasswrap { padding: 32px 24px; border-radius: 24px; } } /* ───────────────────────────────────────────── V29 — Device Change Request form (inc/device-binding.php). Plain WP page + shortcode, on-brand glass card, deliberately built as a normal page rather than inside Masteriyo's React dashboard — see the architecture rule about not touching Masteriyo templates. ───────────────────────────────────────────── */ .cb-device-request { max-width: 520px; margin: 64px auto; padding: 40px 36px; border-radius: 24px; } .cb-device-request h3 { font-size: 26px; margin-bottom: 10px; } .cb-device-request-sub { color: var(--cb-slate); font-size: 15px; line-height: 1.6; margin-bottom: 24px; } .cb-device-request-notice { background: rgba(30,71,230,0.08); border: 1px solid rgba(30,71,230,0.18); color: var(--cb-navy); font-size: 14px; padding: 12px 16px; border-radius: 12px; margin-bottom: 20px; } .cb-device-request-form { display: flex; flex-direction: column; gap: 18px; } .cb-device-request-form label { display: flex; flex-direction: column; gap: 6px; font-family: 'Nunito', sans-serif; font-weight: 600; font-size: 13px; color: var(--cb-navy); } .cb-device-request-form input, .cb-device-request-form textarea { font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 400; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--cb-line); background: #fff; color: var(--cb-ink); resize: vertical; } .cb-device-request-form input:focus, .cb-device-request-form textarea:focus { outline: none; border-color: var(--cb-royal); box-shadow: 0 0 0 3px rgba(30,71,230,0.12); } .cb-device-request-form button { align-self: flex-start; margin-top: 4px; } @media (max-width: 600px) { .cb-device-request { margin: 40px 16px; padding: 28px 22px; } } .cb-device-notice { max-width: 640px; margin: 0 auto 28px; padding: 14px 20px; background: rgba(245,184,0,0.10); border: 1px solid rgba(245,184,0,0.35); border-radius: 14px; font-family: 'Roboto', sans-serif; font-size: 14px; line-height: 1.6; color: var(--cb-navy); text-align: center; }