/* ========================================================================== CRYSTALSKILL — PROMO / URGENCY / SOCIAL PROOF LAYER Loaded last in includes/header.php so it can override base rules. Contains: announcement bar, countdown timers, seat meter, the 3-row company strip, and the shared price block (offer + sticker + % off). Everything uses the existing design tokens in variables.css. ========================================================================== */ /* ---------- Announcement bar offset ---------- One variable drives the whole layout shift. When the offer ends (or the visitor dismisses the bar) gets .no-annbar and this collapses to 0, so nothing else on the site needs to know the bar ever existed. */ :root{ --annbar-h: 46px; --promo: #E5484D; /* sale/urgency accent — deliberately warm so it stands out from the blue brand */ --promo-deep: #B3252A; } @media(max-width:900px){ :root{ --annbar-h: 52px; } } @media(max-width:560px){ :root{ --annbar-h: 46px; } } html.no-annbar{ --annbar-h: 0px; } html.no-annbar .annbar{ display:none; } body{ padding-top:var(--annbar-h); } .nav{ top:var(--annbar-h); } .hero{ min-height:calc(100svh - var(--annbar-h)); } .enroll-sidebar{ top:calc(110px + var(--annbar-h)); } /* ---------- Announcement bar ---------- */ .annbar{ position:fixed; top:0; left:0; right:0; z-index:260; height:var(--annbar-h); display:flex; align-items:center; justify-content:center; background:linear-gradient(90deg, var(--promo-deep), var(--promo) 38%, var(--gold-deep) 100%); color:#fff; overflow:hidden; } .annbar::after{ /* soft sheen sweeping across the bar */ content:''; position:absolute; top:0; bottom:0; width:40%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); animation:annbar-sheen 5s linear infinite; pointer-events:none; } @keyframes annbar-sheen{ 0%{ left:-45%; } 100%{ left:105%; } } .annbar__inner{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; text-align:center; padding:6px 46px 6px 16px; width:100%; max-width:var(--container); color:#fff; font-size:13.5px; line-height:1.35; } .annbar__inner:hover{ color:#fff; } .annbar__msg b{ font-weight:700; letter-spacing:.01em; } .annbar__seats b{ font-family:var(--font-mono); font-weight:700; } .annbar__sep{ opacity:.55; } .annbar__flame{ font-size:15px; } .annbar__cta{ font-weight:700; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.45); padding:4px 12px; border-radius:2px; white-space:nowrap; font-size:12.5px; transition:background var(--dur-fast); } .annbar__inner:hover .annbar__cta{ background:rgba(255,255,255,.32); } .annbar__close{ position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#fff; font-size:20px; line-height:1; opacity:.7; padding:4px 8px; background:none; border:none; cursor:pointer; } .annbar__close:hover{ opacity:1; } /* Long copy on desktop, terse copy on phones — the bar must never wrap past its fixed height or it slides under the nav. */ .annbar__msg--sm{ display:none; } @media(max-width:900px){ .annbar__inner{ flex-wrap:nowrap; font-size:12.5px; padding:4px 34px 4px 12px; gap:8px; } .annbar__msg--lg{ display:none; } .annbar__msg--sm{ display:inline; } } @media(max-width:560px){ .annbar__inner{ gap:6px; font-size:11px; padding:4px 28px 4px 8px; } .annbar__sep{ display:none; } .annbar__seats-word{ display:none; } .annbar__flame{ display:none; } .annbar__cta{ font-size:10.5px; padding:3px 8px; } .countdown--inline{ font-size:11px; gap:3px; } .countdown--inline .countdown__unit{ padding:2px 4px; } .annbar__close{ right:4px; font-size:17px; padding:4px 6px; } } /* ---------- Countdown ---------- */ .countdown--inline{ display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:12.5px; white-space:nowrap; } .countdown--inline .countdown__unit{ background:rgba(0,0,0,.22); padding:3px 6px; border-radius:2px; } .countdown--inline b{ font-weight:700; } .countdown--block{ display:flex; gap:10px; } .countdown__box{ min-width:62px; text-align:center; padding:10px 6px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:var(--radius-sm); } .countdown__box b{ display:block; font-family:var(--font-mono); font-size:1.5rem; font-weight:700; color:var(--t1); line-height:1.1; } .countdown__box span{ display:block; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--t2); margin-top:4px; } .promo-band--light .countdown__box{ background:rgba(14,27,51,.05); border-color:rgba(14,27,51,.12); } .promo-band--light .countdown__box b{ color:var(--td1); } .promo-band--light .countdown__box span{ color:var(--td2); } .countdown.is-over .countdown__box b, .countdown.is-over b{ opacity:.5; } @media(max-width:560px){ .countdown__box{ min-width:0; flex:1; padding:8px 2px; } .countdown__box b{ font-size:1.15rem; } } /* ---------- Seat meter ---------- */ .seat-meter{ margin-top:18px; max-width:380px; } .seat-meter__bar{ height:8px; background:rgba(255,255,255,.14); border-radius:99px; overflow:hidden; } .promo-band--light .seat-meter__bar{ background:rgba(14,27,51,.10); } .seat-meter__bar span{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--gold), var(--promo)); transition:width .8s var(--ease); } .seat-meter__label{ margin-top:8px; font-size:12.5px; color:var(--t2); } .seat-meter__label b{ color:var(--gold-light); font-family:var(--font-mono); } .promo-band--light .seat-meter__label{ color:var(--td2); } .promo-band--light .seat-meter__label b{ color:var(--gold-deep); } /* ---------- Promo band (reusable urgency block) ---------- */ .promo-band{ display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; padding:28px 32px; border-radius:var(--radius); clip-path:polygon(var(--facet) 0, 100% 0, 100% calc(100% - var(--facet)), calc(100% - var(--facet)) 100%, 0 100%, 0 var(--facet)); } .promo-band--dark{ background:linear-gradient(120deg, var(--onyx-2), var(--onyx-3)); border:1px solid rgba(108,147,255,.22); } .promo-band--light{ background:var(--ivory); border:1px solid rgba(61,107,240,.22); box-shadow:var(--shadow-card); } .promo-band__eyebrow{ display:inline-block; font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-light); } .promo-band--light .promo-band__eyebrow{ color:var(--gold-deep); } .promo-band__title{ font-family:var(--font-serif); font-size:clamp(1.25rem,2.4vw,1.7rem); font-weight:600; color:var(--t1); margin-top:8px; max-width:520px; } .promo-band--light .promo-band__title{ color:var(--td1); } .promo-band__right{ display:flex; flex-direction:column; gap:16px; align-items:stretch; } .promo-band__cta{ text-align:center; } @media(max-width:760px){ .promo-band{ padding:24px 20px; gap:22px; } .promo-band__left, .promo-band__right{ width:100%; } .countdown--block{ width:100%; } } /* ---------- Price block (offer + sticker + % off) ---------- */ .price-block{ display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; } .price-block__now{ font-family:var(--font-serif); font-size:1.4rem; font-weight:600; color:var(--td1); } .price-block__mrp{ font-size:.88rem; color:var(--td2); text-decoration:line-through; font-weight:400; } .price-block__off{ font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.06em; color:#fff; background:var(--promo); padding:3px 7px; border-radius:2px; white-space:nowrap; } .price-block__free{ font-family:var(--font-serif); font-size:1.4rem; font-weight:600; color:var(--gold-deep); } .price-block--lg .price-block__now{ font-size:2.1rem; } .price-block--lg .price-block__mrp{ font-size:1.05rem; } .price-block--lg .price-block__off{ font-size:12px; padding:5px 10px; } .price-block--lg .price-block__free{ font-size:2rem; } /* On dark surfaces (featured cards, dark sections) */ .featured-course-card .price-block__now, .sec--dark .price-block__now, .price-block--on-dark .price-block__now{ color:var(--t1); } .featured-course-card .price-block__mrp, .sec--dark .price-block__mrp, .price-block--on-dark .price-block__mrp{ color:var(--t2); } .featured-course-card .price-block__free, .sec--dark .price-block__free, .price-block--on-dark .price-block__free{ color:var(--gold-light); } /* ---------- 3-row company strip ---------- */ .company-strip{ overflow:hidden; } .company-strip__row{ display:flex; overflow:hidden; width:100%; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .company-strip__row + .company-strip__row{ margin-top:14px; } .company-strip__track{ display:flex; flex-shrink:0; gap:14px; padding-right:14px; width:max-content; will-change:transform; } .company-strip__track--rtl{ animation:company-rtl 68s linear infinite; } .company-strip__track--ltr{ animation:company-ltr 68s linear infinite; } .company-strip__row:nth-child(2) .company-strip__track{ animation-duration:82s; } .company-strip__row:nth-child(3) .company-strip__track{ animation-duration:74s; } @keyframes company-rtl{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } } @keyframes company-ltr{ from{ transform:translateX(-100%); } to{ transform:translateX(0); } } .company-strip:hover .company-strip__track{ animation-play-state:paused; } .company-chip{ flex-shrink:0; display:inline-flex; align-items:center; gap:9px; padding:12px 20px; white-space:nowrap; background:var(--onyx-2); border:1px solid rgba(255,255,255,.07); border-radius:var(--radius-sm); font-family:var(--font-sans); font-size:14px; font-weight:500; color:var(--t2); transition:border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast); } .company-chip:hover{ background:var(--onyx-3); border-color:rgba(108,147,255,.4); color:var(--t1); } .company-chip__dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; background:var(--gold); box-shadow:0 0 0 3px rgba(61,107,240,.18); } @media(max-width:600px){ .company-chip{ padding:9px 14px; font-size:12.5px; } .company-strip__row + .company-strip__row{ margin-top:10px; } } @media (prefers-reduced-motion: reduce){ .company-strip__track{ animation:none !important; } .annbar::after{ animation:none !important; } } /* ---------- Programme spotlight (home page) ---------- */ .prog-spotlight{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; } @media(max-width:900px){ .prog-spotlight{ grid-template-columns:1fr; gap:36px; } } .prog-points{ display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; margin-top:28px; } @media(max-width:520px){ .prog-points{ grid-template-columns:1fr; } } .prog-point{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--td2); } .prog-point b{ color:var(--td1); font-weight:600; } .prog-point__tick{ color:var(--gold); flex-shrink:0; font-weight:700; } .prog-buybox{ background:var(--ivory); border:1px solid rgba(61,107,240,.2); box-shadow:var(--shadow-soft); padding:30px; border-radius:var(--radius); clip-path:polygon(var(--facet) 0, 100% 0, 100% calc(100% - var(--facet)), calc(100% - var(--facet)) 100%, 0 100%, 0 var(--facet)); } .prog-buybox__save{ display:inline-block; margin-top:10px; font-size:13px; color:var(--gold-deep); font-weight:600; } .prog-buybox__divider{ height:1px; background:rgba(14,27,51,.1); margin:22px 0; } .prog-buybox__list{ display:flex; flex-direction:column; gap:10px; margin-top:18px; } .prog-buybox__list li{ font-size:13.5px; color:var(--td2); } /* ---------- Sticky mobile enrol bar ---------- */ .promo-sticky{ position:fixed; left:0; right:0; bottom:0; z-index:95; display:none; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(10,20,40,.97); backdrop-filter:blur(14px); border-top:1px solid rgba(108,147,255,.25); } .promo-sticky__price{ display:flex; flex-direction:column; line-height:1.25; } .promo-sticky__price b{ font-family:var(--font-serif); font-size:1.1rem; color:var(--t1); } .promo-sticky__price span{ font-size:11px; color:var(--gold-light); font-family:var(--font-mono); } .promo-sticky .btn{ padding:11px 18px; font-size:13px; white-space:nowrap; } @media(max-width:900px){ .promo-sticky{ display:flex; bottom:60px; } body.has-promo-sticky{ padding-bottom:130px; } /* Float buttons would otherwise sit on top of the sticky Enroll button */ body.has-promo-sticky .float-actions{ bottom:138px; } } /* ---------- Footer logo — matches the round logo in the top nav ---------- */ .footer__logo-img{ height:44px; width:44px; border-radius:50%; object-fit:cover; display:block; background:var(--ivory); padding:2px; box-shadow:0 0 0 1px rgba(255,255,255,.14); } /* ---------- Hero offer strip (home page) ---------- */ .hero__offer{ display:inline-flex; flex-direction:column; gap:10px; padding:16px 20px; max-width:560px; background:rgba(255,255,255,.05); border:1px solid rgba(108,147,255,.28); border-radius:var(--radius); clip-path:polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); } .hero__offer-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .hero__offer-row--sub{ font-size:12.5px; color:var(--t2); } .hero__offer-row--sub b{ color:var(--gold-light); } .hero__offer-tag{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:var(--promo); padding:4px 9px; border-radius:2px; } .hero__offer .price-block__now{ font-size:1.9rem; color:var(--t1); } .hero__offer .price-block__mrp{ font-size:1rem; color:var(--t2); } /* ---------- Urgency block inside the course enrol sidebar ---------- */ .enroll-urgency{ margin-top:22px; padding:18px; border-radius:var(--radius-sm); background:rgba(61,107,240,.06); border:1px solid rgba(61,107,240,.2); } .enroll-urgency__head{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:12px; } .enroll-urgency .countdown__box{ background:rgba(14,27,51,.05); border-color:rgba(14,27,51,.12); } .enroll-urgency .countdown__box b{ color:var(--td1); font-size:1.3rem; } .enroll-urgency .countdown__box span{ color:var(--td2); } .enroll-urgency .seat-meter{ margin-top:14px; max-width:none; } .enroll-urgency .seat-meter__bar{ background:rgba(14,27,51,.1); } .enroll-urgency .seat-meter__label{ color:var(--td2); } .enroll-urgency .seat-meter__label b{ color:var(--gold-deep); } .promo-sticky__price s{ opacity:.65; } /* ---------- Buy box sits on a white card, so the countdown + seat meter need the light treatment (they default to white-on-dark). ---------- */ .prog-buybox .countdown__box{ background:rgba(14,27,51,.05); border-color:rgba(14,27,51,.12); } .prog-buybox .countdown__box b{ color:var(--td1); } .prog-buybox .countdown__box span{ color:var(--td2); } .prog-buybox .seat-meter{ max-width:none; } .prog-buybox .seat-meter__bar{ background:rgba(14,27,51,.10); } .prog-buybox .seat-meter__label{ color:var(--td2); } .prog-buybox .seat-meter__label b{ color:var(--gold-deep); }