/* ========================================================================== Evolution EduTech design system: "Academic Proceedings" - Sharp geometry (2-4px), hairline rules, logo sky blue as the single action colour - Fluid spacing tokens (clamp, 360px -> 1200px) - Colours and fonts come from Elementor Global Colors / Global Fonts - Utility classes are added in Elementor -> Advanced -> CSS Classes ========================================================================== */ /* ---------- Tokens ---------- */ :root { --sp-4: 0.25rem; --sp-8: 0.5rem; --sp-12: clamp(0.625rem, 0.57rem + 0.26vw, 0.75rem); --sp-16: clamp(0.75rem, 0.63rem + 0.51vw, 1rem); --sp-20: clamp(0.875rem, 0.7rem + 0.77vw, 1.25rem); --sp-24: clamp(1.125rem, 0.95rem + 0.77vw, 1.5rem); --sp-28: clamp(1.25rem, 1.02rem + 1.03vw, 1.75rem); --sp-32: clamp(1.5rem, 1.27rem + 1.03vw, 2rem); --sp-40: clamp(1.75rem, 1.4rem + 1.54vw, 2.5rem); --sp-48: clamp(2rem, 1.54rem + 2.05vw, 3rem); --sp-64: clamp(2.5rem, 1.81rem + 3.08vw, 4rem); --sp-80: clamp(3rem, 2.08rem + 4.1vw, 5rem); --sp-96: clamp(3.5rem, 2.35rem + 5.13vw, 6rem); --sp-120: clamp(4rem, 2.38rem + 7.18vw, 7.5rem); --gutter: clamp(1.25rem, 0.67rem + 2.56vw, 2.5rem); --content: 1280px; --measure: 64ch; /* Geometry: deliberately sharp */ --r-xs: 2px; --r-sm: 2px; --r-md: 3px; --r-lg: 4px; --r-xl: 4px; --r-pill: 2px; --rule: 1px; --rule-strong: 2px; --tab: 4px; } /* Elementor prints Global Colors on body.elementor-kit-N, so aliases live on body. */ body { --c-navy: var(--e-global-color-primary); --c-blue: var(--e-global-color-secondary); --c-accent-text: var(--e-global-color-secondary); --c-text: var(--e-global-color-text); --c-accent: var(--e-global-color-accent); --c-navy-700: var(--e-global-color-navy700); --c-navy-900: var(--e-global-color-navy900); --c-navy-50: var(--e-global-color-navy50); --c-navy-100: var(--e-global-color-navy100); --c-navy-200: var(--e-global-color-navy200); --c-accent-soft: var(--e-global-color-accentsoft); --c-accent-hover: var(--e-global-color-accenthover); --c-sail: var(--e-global-color-sail); --c-muted: var(--e-global-color-muted); --c-white: var(--e-global-color-white); --c-gold-soft: var(--e-global-color-goldsoft); --c-gold-text: var(--e-global-color-goldtext); --on-dark-86: rgba(255, 255, 255, 0.86); --on-dark-72: rgba(255, 255, 255, 0.72); --on-dark-16: rgba(255, 255, 255, 0.16); --on-dark-12: rgba(255, 255, 255, 0.12); --on-dark-6: rgba(255, 255, 255, 0.06); --shadow-soft: 0 18px 32px -26px color-mix(in srgb, var(--c-navy) 55%, transparent); --shadow-lift: 0 28px 48px -32px color-mix(in srgb, var(--c-navy-900) 70%, transparent); } /* ---------- Base ---------- */ html { scroll-behavior: smooth; } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } .elementor-heading-title { text-wrap: balance; } .elementor-widget-text-editor p:last-child { margin-bottom: 0; } ::selection { background: var(--c-accent); color: var(--c-navy-900); } :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: 0; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } } /* ---------- Section spacing (top-level containers) ---------- */ .e-con.sec-inline { --padding-left: var(--gutter); --padding-right: var(--gutter); } .e-con.sec-sm { --padding-top: var(--sp-64); --padding-bottom: var(--sp-64); } .e-con.sec-md { --padding-top: var(--sp-80); --padding-bottom: var(--sp-80); } .e-con.sec-lg { --padding-top: var(--sp-96); --padding-bottom: var(--sp-96); } .e-con.sec-flush-top { --padding-top: 0px; } .e-con.sec-flush-bottom { --padding-bottom: 0px; } .e-con.sec-tint { background-color: var(--c-navy-50); border-block: var(--rule) solid var(--c-navy-100); } .e-con.sec-dark { background-color: var(--c-navy); color: var(--on-dark-86); } .e-con.sec-deep { background-color: var(--c-navy-900); color: var(--on-dark-72); } .e-con.content-wrap { --content-width: min(100%, var(--content)); } .e-con.measure { max-width: var(--measure); } /* Stack gaps */ .e-con.gap-sm { --gap: var(--sp-12); --row-gap: var(--sp-12); --column-gap: var(--sp-12); } .e-con.gap-md { --gap: var(--sp-20); --row-gap: var(--sp-20); --column-gap: var(--sp-20); } .e-con.gap-lg { --gap: var(--sp-32); --row-gap: var(--sp-32); --column-gap: var(--sp-32); } .e-con.gap-xl { --gap: var(--sp-64); --row-gap: var(--sp-48); --column-gap: var(--sp-64); } .e-con.head-gap { margin-bottom: var(--sp-48); } .e-con.mt-24 { margin-top: var(--sp-24); } .e-con.mx-auto { margin-inline: auto; } /* ---------- Box padding ---------- */ .e-con.pad-sm { --padding-top: var(--sp-20); --padding-right: var(--sp-20); --padding-bottom: var(--sp-20); --padding-left: var(--sp-20); } .e-con.pad-md { --padding-top: var(--sp-24); --padding-right: var(--sp-24); --padding-bottom: var(--sp-24); --padding-left: var(--sp-24); } .e-con.pad-lg { --padding-top: var(--sp-28); --padding-right: var(--sp-28); --padding-bottom: var(--sp-28); --padding-left: var(--sp-28); } .e-con.pad-xl { --padding-top: var(--sp-48); --padding-right: var(--sp-48); --padding-bottom: var(--sp-48); --padding-left: var(--sp-48); } /* ---------- Surfaces ---------- */ .e-con.card { background-color: var(--c-white); border: var(--rule) solid var(--c-navy-100); border-radius: var(--r-lg); overflow: hidden; position: relative; } .e-con.card-dark { background-color: var(--c-navy); border-color: transparent; color: var(--on-dark-86); } .e-con.card-dark .elementor-heading-title { color: var(--c-white); } .e-con.radius-xl { border-radius: var(--r-xl); overflow: hidden; } .shadow-soft { box-shadow: var(--shadow-soft); } .shadow-lift { box-shadow: var(--shadow-lift); } /* Hover: a sky blue baseline slides in under the card */ .hover-lift { transition: border-color .25s, transform .25s, box-shadow .25s; } .hover-lift::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--c-accent); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; pointer-events: none; z-index: 3; } .hover-lift:hover { border-color: var(--c-navy-200); transform: translateY(-2px); box-shadow: var(--shadow-soft); } .hover-lift:hover::after { transform: scaleX(1); } /* ---------- Images ---------- */ .img-r img, .img-r-lg img { border-radius: var(--r-lg); } .ratio-3x2 img { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; } .ratio-4x3 img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; } .ratio-4x5 img { width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; object-position: 50% 18%; } .ratio-1x1 img { width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; object-position: 50% 22%; } .hover-zoom { overflow: hidden; } .hover-zoom img { transition: transform .6s ease; } .hover-lift:hover .hover-zoom img { transform: scale(1.03); } .img-card img { border-radius: 0; } /* ---------- Hero: navy panel on the left, photo on the right ---------- Container background = Elementor background image. */ .e-con.hero-band { position: relative; isolation: isolate; } .e-con.hero-band { background-repeat: no-repeat; background-size: cover; background-position: center center; } .e-con.hero-band::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: /* right edge fades into navy, so a photo's own border never shows */ linear-gradient(270deg, var(--c-navy) 0%, color-mix(in srgb, var(--c-navy) 92%, transparent) 9%, color-mix(in srgb, var(--c-navy) 55%, transparent) 17%, transparent 28%), linear-gradient(90deg, var(--c-navy) 0%, var(--c-navy) 50%, color-mix(in srgb, var(--c-navy) 78%, transparent) 62%, color-mix(in srgb, var(--c-navy) 18%, transparent) 100%); } .e-con.hero-band::after { content: ""; position: absolute; left: 0; bottom: 0; z-index: -1; width: min(38%, 420px); height: var(--tab); background: var(--c-accent); } .e-con.hero-pad { --padding-top: var(--sp-120); --padding-bottom: var(--sp-120); } .e-con.hero-pad--page { --padding-top: var(--sp-80); --padding-bottom: var(--sp-80); } @media (max-width: 1024px) { .e-con.hero-band { background-size: 100% auto !important; background-position: top center !important; background-repeat: no-repeat !important; } .e-con.hero-band::before { background: linear-gradient(180deg, color-mix(in srgb, var(--c-navy) 15%, transparent) 0, color-mix(in srgb, var(--c-navy) 60%, transparent) 38vw, var(--c-navy) 64vw); } .e-con.hero-pad { --padding-top: 52vw; --padding-bottom: var(--sp-80); } .e-con.hero-pad--page { --padding-top: 42vw; --padding-bottom: var(--sp-64); } } /* On phones the hero text column always spans the screen, so nothing is cut off */ @media (max-width: 767px) { .e-con.hero-band > .e-con, .e-con.hero-band > .e-con-inner > .e-con { --width: 100%; max-width: 100%; } } /* Stat bar directly under the hero (no overlap, no floating card) */ .e-con.overlap-up { margin-top: 0; position: relative; z-index: 2; background: var(--c-white); border-bottom: var(--rule) solid var(--c-navy-100); } /* ---------- Dark sections: solid navy with a short sky blue tab ---------- */ .e-con.deco-rings { position: relative; isolation: isolate; overflow: hidden; } .e-con.deco-rings::after { content: ""; position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; width: 72px; height: var(--tab); background: var(--c-accent); } /* ---------- Text helpers ---------- */ .hl { color: var(--c-blue); } .on-dark .hl, .hero-band .hl, .sec-dark .hl, .sec-deep .hl, .card-dark .hl { color: var(--c-accent-soft); } .eyebrow .elementor-heading-title { display: inline-flex; align-items: center; gap: .6rem; } .eyebrow .elementor-heading-title::before { content: ""; width: 18px; height: 2px; background: var(--c-accent); flex: none; } .measure .elementor-widget-container, .measure-text .elementor-widget-container { max-width: var(--measure); } .on-dark, .on-dark .elementor-heading-title { color: var(--c-white); } .on-dark-muted, .on-dark-muted p { color: var(--on-dark-72); } /* ---------- Buttons ---------- Default look (navy, square) comes from Site Settings -> Buttons. */ .elementor-button { border-radius: var(--r-xs) !important; transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s; } .elementor-button .elementor-button-content-wrapper { align-items: center; } .elementor-button .elementor-button-icon { display: inline-flex; align-items: center; transition: transform .2s; } .elementor-button .elementor-button-icon svg { width: 1.15em; height: 1.15em; fill: currentColor; } .elementor-button:hover .elementor-button-icon.elementor-align-icon-right { transform: translateX(3px); } .btn-accent .elementor-button { background-color: var(--c-accent); color: var(--c-navy-900); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--c-navy-900) 18%, transparent); } .btn-accent .elementor-button:hover { background-color: var(--c-accent-hover); color: var(--c-navy-900); } .btn-outline .elementor-button { background-color: transparent; color: var(--c-navy); box-shadow: inset 0 0 0 1.5px var(--c-navy); } .btn-outline .elementor-button:hover { background-color: var(--c-navy); color: var(--c-white); } .btn-ghost .elementor-button { background-color: transparent; color: var(--c-white); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); } .btn-ghost .elementor-button:hover { background-color: var(--c-white); color: var(--c-navy); } .btn-sm .elementor-button { padding: .7rem 1rem; font-size: .9rem; } .btn-block .elementor-button { width: 100%; justify-content: center; } /* Text link with arrow (no box) */ .link-arrow .elementor-button { background: transparent !important; padding: 0 0 .25rem !important; box-shadow: none !important; color: var(--c-navy) !important; border-radius: 0 !important; background-image: linear-gradient(var(--c-accent), var(--c-accent)) !important; background-size: 0 2px !important; background-position: 0 100% !important; background-repeat: no-repeat !important; transition: background-size .25s, color .2s !important; } .link-arrow .elementor-button .elementor-button-icon { border: 0 !important; padding-inline-start: .4rem !important; margin: 0 !important; } .link-arrow .elementor-button:hover, .hover-lift:hover .link-arrow .elementor-button { background-size: 100% 2px !important; } .link-arrow .elementor-button:hover .elementor-button-icon, .hover-lift:hover .link-arrow .elementor-button-icon { transform: translateX(4px); } .on-dark .link-arrow .elementor-button, .link-arrow.on-dark .elementor-button { color: var(--c-accent-soft) !important; } /* ---------- Tags (chips): square, set in the mono "chip" global font ---------- */ .chip .elementor-button, .chip .elementor-heading-title { display: inline-flex; align-items: center; gap: .4rem; background: var(--c-navy-50); color: var(--c-navy); box-shadow: inset 0 0 0 1px var(--c-navy-100); padding: .3rem .6rem; border-radius: var(--r-xs); cursor: default; transform: none !important; border: 0; } .chip.chip-gold .elementor-button, .chip.chip-gold .elementor-heading-title { background: var(--c-gold-soft); color: var(--c-gold-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-gold-text) 22%, transparent); } .chip.chip-white .elementor-heading-title { background: var(--c-white); } .chip .elementor-button-icon { color: var(--c-blue); } .e-con.chips { --gap: 6px; --row-gap: 6px; --column-gap: 6px; } /* ---------- Icon squares (Icon / Icon Box widgets) ---------- */ .icon-circle .elementor-icon { width: 48px; height: 48px; border-radius: var(--r-xs); display: inline-grid; place-items: center; background: var(--c-navy-50); color: var(--c-blue); font-size: 20px; box-shadow: inset 0 0 0 1px var(--c-navy-100); } .icon-circle .elementor-icon svg { width: 24px; height: 24px; fill: var(--c-blue) !important; } .icon-circle.icon-sm .elementor-icon { width: 42px; height: 42px; font-size: 18px; } .icon-circle.icon-sm .elementor-icon svg { width: 22px; height: 22px; } .icon-circle.icon-grad .elementor-icon { background: var(--c-navy); color: var(--c-accent); box-shadow: none; } /* ---------- Stat bar ---------- */ .e-con.trust-strip { background: transparent; border-radius: 0; box-shadow: none; } .e-con.trust-strip > .e-con-inner > .e-con + .e-con, .e-con.trust-strip > .e-con + .e-con { border-left: var(--rule) solid var(--c-navy-100); } @media (max-width: 1024px) { .e-con.trust-strip > .e-con-inner > .e-con, .e-con.trust-strip > .e-con { border-left: 0 !important; border-bottom: var(--rule) solid var(--c-navy-100); } } /* ---------- Date block (event cards) ---------- */ .e-con.date-block { background: var(--c-navy); border-radius: var(--r-xs); text-align: center; min-width: 96px; border-bottom: var(--tab) solid var(--c-accent); } /* ---------- Check list (Icon List widget) ---------- */ .checks .elementor-icon-list-item { align-items: flex-start !important; } .checks .elementor-icon-list-icon { width: 22px; min-width: 22px; height: 1.7em; margin: 0 !important; display: flex; align-items: center; justify-content: center; background: none; border-radius: 0; } .checks .elementor-icon-list-icon svg { width: 22px !important; height: 22px !important; fill: var(--c-blue) !important; } .checks .elementor-icon-list-icon i { font-size: 18px !important; color: var(--c-blue) !important; } .checks .elementor-icon-list-text { padding-inline-start: .7rem !important; } .checks.cols .elementor-icon-list-items { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem 1.5rem; } .checks.cols .elementor-icon-list-item { margin: 0 !important; padding: 0 !important; } @media (max-width: 767px) { .checks.cols .elementor-icon-list-items { grid-template-columns: 1fr; } } .sec-dark .checks .elementor-icon-list-icon svg, .card-dark .checks .elementor-icon-list-icon svg { fill: var(--c-accent-soft) !important; } .sec-dark .checks .elementor-icon-list-icon i, .card-dark .checks .elementor-icon-list-icon i { color: var(--c-accent-soft) !important; } .meta-line .elementor-icon-list-icon svg { width: 16px !important; height: 16px !important; fill: var(--c-blue) !important; } .meta-line .elementor-icon-list-icon i { font-size: 13px; } /* ---------- Timeline steps on dark ---------- Elementor styles every .e-con::before as a full-size background overlay, so the step number is reset to a normal block that sits above the title. */ .e-con.steps { counter-reset: step; } .e-con.steps .step { counter-increment: step; position: relative; --padding-top: var(--sp-20); --padding-right: var(--sp-16); --padding-bottom: 0px; --padding-left: 0px; --gap: .5rem; --row-gap: .5rem; border-top: var(--rule-strong) solid var(--on-dark-16); } .e-con.steps .step::before { content: counter(step, decimal-leading-zero) !important; position: static !important; display: block !important; inset: auto !important; width: auto !important; height: auto !important; transform: none !important; background: none !important; opacity: 1 !important; mix-blend-mode: normal !important; margin: 0 0 .25rem; font-family: var(--e-global-typography-label-font-family), ui-monospace, monospace; font-size: var(--e-global-typography-label-font-size); font-weight: 600; letter-spacing: .08em; line-height: 1.3; color: var(--c-accent-soft); } .e-con.steps .step::after { content: ""; position: absolute; left: 0; top: calc(var(--rule-strong) * -1); width: 48px; height: var(--rule-strong); background: var(--c-accent); } /* ---------- FAQ (Accordion widget): ruled rows ---------- */ .faq-list .elementor-accordion-item { border: 0 !important; border-bottom: var(--rule) solid var(--c-navy-200) !important; border-radius: 0; background: transparent; margin: 0; overflow: visible; } .faq-list .elementor-accordion-item:first-child { border-top: var(--rule) solid var(--c-navy-200) !important; } .faq-list .elementor-tab-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 0 !important; padding: 1.15rem 0 !important; } .faq-list .elementor-tab-title.elementor-active .elementor-accordion-title { color: var(--c-blue) !important; } .faq-list .elementor-accordion-title { flex: 1; } .faq-list .elementor-tab-content { border: 0 !important; padding: 0 3rem 1.25rem 0 !important; } .faq-list .elementor-accordion-icon { order: 2; flex: none; float: none !important; width: 30px !important; height: 30px; border-radius: var(--r-xs); background: var(--c-navy-50); box-shadow: inset 0 0 0 1px var(--c-navy-100); display: inline-grid !important; place-items: center; text-align: center !important; font-size: 11px !important; line-height: 1 !important; } .faq-list .elementor-tab-title.elementor-active .elementor-accordion-icon { background: var(--c-navy); color: var(--c-white); box-shadow: none; } .faq-list .elementor-tab-title.elementor-active .elementor-accordion-icon i { color: var(--c-white) !important; } .faq-list .elementor-tab-title.elementor-active .elementor-accordion-icon svg { fill: var(--c-white) !important; } .faq-list .elementor-tab-title:not(.elementor-active) .elementor-accordion-icon svg { fill: var(--c-navy) !important; } .faq-list .elementor-accordion-icon i { font-size: 11px !important; } .faq-list .elementor-accordion-icon svg { width: 13px !important; height: 13px !important; fill: currentColor; } /* ---------- Header and footer always full width ---------- Elementor Pro prints the header template in
and the footer template in