/* ========================================================================== Edukall Site — the public website's design layer (frontend/site/) -------------------------------------------------------------------------- One set of views serves every site; what tells one site from another is its SKIN: the tokens in this file, selected by data-skin on (site_skin()). A view never carries a colour, a font or a radius of its own — only these tokens — so a new skin is a new token block and nothing else. Bootstrap 5.3 is dressed, not replaced: the bridge at the end points its own --bs-* variables at these tokens, inside .s-site, so dropdowns, modals and forms follow the skin without extra rules. No dark mode: the public site is designed light only. ========================================================================== */ /* ── Skins ────────────────────────────────────────────────────────────────── */ /* Edukall (default): warm sand, forest green, tangerine accents. */ :root { --s-bg: #FBF7F0; --s-surface: #FFFFFF; --s-band: #F4EDE2; --s-line: #EADFCF; --s-ink: #1F1B15; --s-muted: #5E574C; /* At least 4.5:1 on the page, the band and the soft tints: it sets small print. */ --s-faint: #6F675A; --s-accent: #1D5C45; --s-accent-hover: #174B38; --s-on-accent: #FFFFFF; --s-accent-soft: #DCEBE3; --s-accent-soft-ink: #34463D; --s-accent-deep: #245F49; --s-accent-deep-line: #3B7560; --s-on-accent-muted: #CFE3D8; --s-highlight: #F2A65A; --s-on-highlight: #1F1B15; --s-tint-1: #DCEBE3; --s-tint-2: #F1D2B4; --s-tint-3: #E6DCCB; --s-tint-4: #D8D0E6; --s-tint-ink: #4A443B; /* A dark band (a photo's panel, a quote), and the veil that keeps text readable on a photo. */ --s-deep: #1F3A30; --s-on-deep: #FFFFFF; --s-on-deep-muted: #CFE3D8; --s-deep-line: rgba(255, 255, 255, 0.16); --s-scrim: 20, 18, 14; --s-topbar-bg: var(--s-highlight); --s-on-topbar: var(--s-on-highlight); --s-font-display: "Bricolage Grotesque", system-ui, sans-serif; --s-font-body: "Figtree", system-ui, sans-serif; /* The face of an accented word in a heading (site_accent()), and the brand's gradient. */ --s-font-accent: var(--s-font-display); --s-accent-2: #2F8A66; --s-gradient: linear-gradient(120deg, var(--s-accent) 0%, var(--s-accent-2) 55%, var(--s-highlight) 100%); /* How an accented word is painted (site_accent()): a colour, or a gradient through the letters. */ --s-accent-paint: none; --s-accent-paint-on-deep: none; --s-accent-fill: currentColor; --s-accent-track: normal; /* Section headings, eyebrows and buttons. */ /* Every page's h1 (the display .s-h1, a page title set as .s-h2, a product or article title, a photo header) is its rule's size times this: a wider face asks for less. */ --s-h1-scale: 1; --s-h2-size: clamp(30px, 3.6vw, 50px); --s-h2-leading: 1.05; --s-h2-track: var(--s-track-display); --s-eyebrow-track: .16em; --s-eyebrow-mark-width: 8px; --s-eyebrow-mark-height: 8px; --s-eyebrow-mark-radius: 999px; --s-eyebrow-mark: var(--s-highlight); --s-btn-radius: var(--s-radius-btn); --s-btn-primary-bg: var(--s-accent); --s-btn-primary-hover-bg: var(--s-accent-hover); --s-btn-primary-hover-filter: none; --s-btn-primary-border: 1px solid transparent; --s-btn-primary-shadow: none; --s-btn-highlight-shadow: none; --s-btn-highlight-hover-bg: var(--s-surface); --s-btn-highlight-hover-ink: var(--s-ink); --s-btn-hover-lift: none; /* The footer, and a phone's buy bar. */ --s-footer-bg: var(--s-band); /* The keyboard focus ring: the action colour on light ground (the amber marker was 1.9:1 on white), the amber on the dark bands, where it is the one that stands out. */ --s-focus: var(--s-accent); --s-focus-on-deep: var(--s-highlight); --s-footer-focus: var(--s-focus); --s-footer-gap: 0px; --s-footer-ink: var(--s-muted); --s-footer-strong: var(--s-ink); --s-footer-link-hover: var(--s-ink); --s-footer-logo-filter: none; --s-footer-control-bg: var(--s-surface); --s-footer-control-line: var(--s-line); --s-footer-control-ink: var(--s-ink); --s-buybar-bg: var(--s-surface); --s-buybar-blur: none; --s-buybar-shadow: 0 -8px 24px rgba(31, 27, 21, 0.08); /* Dark surfaces a design lays photos and glass on. */ --s-deep-3: var(--s-deep); --s-deep-4: var(--s-accent-deep); --s-on-deep-soft: var(--s-on-deep-muted); --s-on-deep-faint: var(--s-on-deep-muted); --s-highlight-soft: var(--s-highlight); --s-ink-soft: var(--s-ink); --s-warm-1: var(--s-highlight); --s-warm-2: var(--s-highlight); --s-warm-3: var(--s-highlight); --s-veil: var(--s-scrim); --s-glass: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05)); --s-glass-line: rgba(255, 255, 255, .2); --s-lift: 0 40px 80px -40px rgba(31, 27, 21, .35), 0 0 0 1px rgba(31, 27, 21, .06); --s-lift-sm: 0 18px 40px -30px rgba(31, 27, 21, .4), 0 0 0 1px rgba(31, 27, 21, .04); --s-display-weight: 700; --s-track-display: -0.04em; --s-radius-sm: 12px; --s-radius: 20px; --s-radius-lg: 28px; --s-radius-btn: 999px; --s-shadow: 0 10px 30px rgba(31, 27, 21, 0.08); --s-shadow-lg: 0 18px 40px rgba(31, 27, 21, 0.14); /* Photos are viewed on dark in every skin. */ --s-viewer-bg: #111111; --s-viewer-ink: #F2F2F2; --s-viewer-muted: #BDBDBD; --s-viewer-control: rgba(0, 0, 0, 0.5); --s-viewer-control-hover: rgba(0, 0, 0, 0.75); --s-viewer-chip: rgba(255, 255, 255, 0.12); --s-viewer-chip-hover: rgba(255, 255, 255, 0.22); /* Behind a QR code: white in every skin, or phones cannot read it. */ --s-qr-bg: #FFFFFF; /* A photo someone has favourited. */ --s-favorite: #D6336C; /* WhatsApp's own green, in every skin: the button is recognised by it. */ --s-whatsapp: #25D366; --s-on-whatsapp: #FFFFFF; --s-container: 1312px; --s-gutter: 16px; --s-section: 104px; } /* A skin for a site not designed yet keeps the default tokens: a new block here, [data-skin="…"] { … }, is how it gets its own (its fonts: site_skin_fonts()). */ /* Imago (a school): white, the logo's purple for actions, its amber for markers, a deep aubergine for dark bands; one grotesk for everything, square-ish corners. */ [data-skin="imago"] { --s-bg: #FFFFFF; --s-surface: #FFFFFF; --s-band: #F4F2F5; --s-line: #E4E0E6; --s-ink: #150D18; --s-muted: #5C5561; --s-faint: #6E6773; --s-accent: #7B2087; --s-accent-hover: #641A6E; --s-on-accent: #FFFFFF; --s-accent-soft: #F6EAF8; --s-accent-soft-ink: #5B1766; --s-accent-deep: #3A1044; --s-accent-deep-line: #55295F; --s-on-accent-muted: #E6D8EA; --s-highlight: #F4AC2B; --s-on-highlight: #1B1206; --s-tint-1: #F6EAF8; --s-tint-2: #FDEBC8; --s-tint-3: #ECE7EE; --s-tint-4: #E3DDF0; --s-tint-ink: #4A3F4F; --s-deep: #2B0B34; --s-on-deep: #FFFFFF; --s-on-deep-muted: #CDBFD3; --s-deep-line: rgba(255, 255, 255, 0.16); --s-scrim: 21, 8, 25; --s-topbar-bg: var(--s-deep); --s-on-topbar: var(--s-on-deep); --s-font-display: "Schibsted Grotesk", system-ui, sans-serif; --s-font-body: "Schibsted Grotesk", system-ui, sans-serif; --s-font-accent: "Instrument Serif", Georgia, serif; --s-accent-2: #B4238C; --s-gradient: linear-gradient(120deg, #7B2087 0%, #B4238C 52%, #F4AC2B 100%); --s-accent-paint: var(--s-gradient); --s-accent-paint-on-deep: linear-gradient(100deg, var(--s-highlight) 0%, var(--s-warm-2) 45%, var(--s-warm-3) 100%); --s-accent-fill: transparent; --s-accent-track: -0.01em; /* Schibsted Grotesk sets wider and heavier than Bricolage: at the same size its titles shouted, so they run smaller for the same presence. */ --s-h1-scale: .8; --s-h2-size: clamp(34px, 3.9vw, 56px); --s-h2-leading: 1.02; --s-h2-track: -0.04em; --s-eyebrow-track: .18em; --s-eyebrow-mark-width: 22px; --s-eyebrow-mark-height: 2px; --s-eyebrow-mark-radius: 2px; --s-eyebrow-mark: var(--s-gradient); --s-btn-radius: 14px; /* The brand's gradient without its amber end: white on the amber was 1.95:1. */ --s-btn-primary-bg: linear-gradient(120deg, var(--s-accent) 0%, var(--s-accent-2) 100%); --s-btn-primary-hover-bg: var(--s-btn-primary-bg); --s-btn-primary-hover-filter: brightness(1.06); --s-btn-primary-border: 0; --s-btn-primary-shadow: 0 14px 34px -12px rgba(123, 32, 135, .8); --s-btn-highlight-shadow: 0 12px 32px -10px rgba(244, 172, 43, .7); --s-btn-highlight-hover-bg: var(--s-highlight); --s-btn-highlight-hover-ink: var(--s-on-highlight); --s-btn-hover-lift: translateY(-1px); --s-footer-bg: var(--s-deep-3); --s-focus: var(--s-accent); --s-focus-on-deep: var(--s-highlight); --s-footer-focus: var(--s-focus-on-deep); --s-footer-gap: 120px; --s-footer-ink: var(--s-on-deep-faint); --s-footer-strong: var(--s-on-deep); --s-footer-link-hover: var(--s-on-deep); --s-footer-logo-filter: brightness(0) invert(1); --s-footer-control-bg: rgba(255, 255, 255, .08); --s-footer-control-line: rgba(255, 255, 255, .16); --s-footer-control-ink: var(--s-on-deep); --s-buybar-bg: rgba(255, 255, 255, .92); --s-buybar-blur: blur(14px); --s-buybar-shadow: 0 -16px 30px -18px rgba(43, 11, 52, .5); --s-deep-3: #16051C; --s-deep-4: #4A1257; --s-on-deep-soft: #E7DBEC; --s-on-deep-faint: #D6C6DD; --s-highlight-soft: #FFD386; --s-ink-soft: #2A2130; --s-warm-1: #E0662F; --s-warm-2: #FF7A59; --s-warm-3: #E85BB5; --s-veil: 22, 5, 28; --s-glass: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05)); --s-glass-line: rgba(255, 255, 255, .2); --s-lift: 0 40px 80px -40px rgba(43, 11, 52, .45), 0 0 0 1px rgba(123, 32, 135, .08); --s-lift-sm: 0 18px 40px -30px rgba(43, 11, 52, .45), 0 0 0 1px rgba(43, 11, 52, .04); --s-display-weight: 700; --s-track-display: -0.035em; --s-radius-sm: 6px; --s-radius: 8px; --s-radius-lg: 12px; --s-radius-btn: 8px; --s-shadow: 0 10px 30px rgba(43, 11, 52, 0.08); --s-shadow-lg: 0 24px 48px -28px rgba(43, 11, 52, 0.45); } @media (min-width: 768px) { :root { --s-gutter: 32px; } } @media (min-width: 1200px) { :root { --s-gutter: 64px; } } @media (max-width: 767.98px) { :root { --s-section: 56px; } } /* ── Base ─────────────────────────────────────────────────────────────────── */ body.s-site { margin: 0; background: var(--s-bg); color: var(--s-ink); font-family: var(--s-font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } .s-site a { color: var(--s-accent); } .s-site a:hover { color: var(--s-accent-hover); } .s-site h1, .s-site h2, .s-site h3, .s-site .s-display { font-family: var(--s-font-display); font-weight: var(--s-display-weight); letter-spacing: var(--s-track-display); color: var(--s-ink); margin: 0; } .s-site .s-accent { font-family: var(--s-font-accent); font-style: italic; font-weight: 400; letter-spacing: var(--s-accent-track); color: var(--s-accent); background: var(--s-accent-paint); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: var(--s-accent-fill); padding-right: .06em; } .s-site :focus-visible { outline: 3px solid var(--s-focus); outline-offset: 2px; } /* Dark bands: the ring in the amber, which reads on them. */ .s-cover, .s-work, .s-utility, .s-voices, .s-phero, .s-closing--band, .s-feature { --s-focus: var(--s-focus-on-deep); } .s-footer { --s-focus: var(--s-footer-focus); } .s-topbar { --s-focus: var(--s-on-topbar); } .s-skip { position: absolute; left: -9999px; top: 8px; z-index: 2000; padding: 10px 16px; border-radius: var(--s-radius-sm); background: var(--s-ink); color: var(--s-bg); } .s-skip:focus { left: 8px; color: var(--s-bg); } .s-container { width: 100%; max-width: calc(var(--s-container) + 2 * var(--s-gutter)); margin: 0 auto; padding: 0 var(--s-gutter); box-sizing: border-box; } .s-section { padding: var(--s-section) 0; } .s-section--flush-top { padding-top: 0; } /* On the home, two plain sections in a row share one gap instead of adding both paddings (104 + 104): the rhythm stays one section apart whichever blocks the admin switches on. */ [data-ek-page="home"] main > .s-section:not(.s-section--band, .s-section--accent, .s-voices, .s-closing--band) + .s-section:not(.s-section--band, .s-section--accent, .s-voices, .s-closing--band) { padding-top: 0; } .s-section--band { background: var(--s-band); } .s-section--accent { background: var(--s-accent); color: var(--s-on-accent); } .s-section--accent h2, .s-section--accent h3 { color: var(--s-on-accent); } /* Type scale — fluid, so one rule serves a phone and a desktop. */ .s-h1 { font-size: calc(clamp(44px, 6vw, 84px) * var(--s-h1-scale)); line-height: 0.98; } .s-h2 { font-size: var(--s-h2-size); line-height: var(--s-h2-leading); } /* A page title set as a section heading is still the page's h1. */ h1.s-h2 { font-size: calc(var(--s-h2-size) * var(--s-h1-scale)); } .s-site .s-h2 { letter-spacing: var(--s-h2-track); } .s-h3 { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.2; letter-spacing: -0.02em; } .s-lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--s-muted); margin: 0; } .s-muted { color: var(--s-muted); } .s-small { font-size: 14px; } .s-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 48px; margin-bottom: 36px; } .s-section-head p { margin: 8px 0 0; } /* ── Buttons, links, chips ────────────────────────────────────────────────── */ .s-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border: 1px solid transparent; border-radius: var(--s-btn-radius); font: inherit; font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform .2s ease, background-color .15s ease, color .15s ease, border-color .15s ease, filter .15s ease; box-sizing: border-box; } .s-btn--lg { min-height: 58px; padding: 0 30px; font-size: 17px; } .s-btn--block { display: flex; width: 100%; } .s-site .s-btn--primary { background: var(--s-btn-primary-bg); color: var(--s-on-accent); border: var(--s-btn-primary-border); box-shadow: var(--s-btn-primary-shadow); } .s-site .s-btn--primary:hover { background: var(--s-btn-primary-hover-bg); color: var(--s-on-accent); filter: var(--s-btn-primary-hover-filter); } .s-site .s-btn--outline { border-color: var(--s-ink); color: var(--s-ink); background: transparent; } .s-site .s-btn--outline:hover { background: var(--s-ink); color: var(--s-bg); } .s-site .s-btn--light { background: var(--s-surface); color: var(--s-ink); } .s-site .s-btn--light:hover { background: var(--s-band); color: var(--s-ink); } .s-site .s-btn--ghost-light { border-color: var(--s-on-accent); color: var(--s-on-accent); } .s-site .s-btn--ghost-light:hover { background: var(--s-on-accent); color: var(--s-accent); } .s-btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .s-site .s-link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; } .s-link-arrow .bi { transition: transform .15s ease; } .s-link-arrow:hover .bi { transform: translateX(3px); } .s-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--s-radius-btn); background: var(--s-accent-soft); color: var(--s-accent); font-size: 14px; font-weight: 600; } .s-tag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--s-radius-btn); background: var(--s-highlight); color: var(--s-on-highlight); font-size: 12px; font-weight: 700; } .s-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; } .s-checks li { display: inline-flex; align-items: center; gap: 6px; color: var(--s-muted); font-size: 15px; } .s-checks .bi { color: var(--s-accent); } /* ── Cards ────────────────────────────────────────────────────────────────── */ .s-card { background: var(--s-surface); border: 1px solid var(--s-line); border-radius: var(--s-radius); } .s-card--pad { padding: 28px; } .s-grid { display: grid; gap: 20px; } .s-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .s-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .s-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 991.98px) { .s-grid--3, .s-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575.98px) { .s-grid--2, .s-grid--3, .s-grid--4 { grid-template-columns: minmax(0, 1fr); } } .s-media { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--s-radius-lg); background: var(--s-tint-3); } /* ── Header ───────────────────────────────────────────────────────────────── */ .s-header { position: sticky; top: 0; z-index: 1020; background: var(--s-bg); border-bottom: 1px solid transparent; } .s-header.is-scrolled { border-bottom-color: var(--s-line); } /* --s-header-bar: the bar's height, which a page that slides under the header reads too. */ .s-header__bar { display: flex; align-items: center; gap: 28px; min-height: var(--s-header-bar, 76px); } .s-header__logo { display: inline-flex; align-items: center; flex-shrink: 0; } .s-header__logo img { display: block; height: 36px; width: auto; } .s-header__nav { display: flex; align-items: center; gap: 4px; flex-grow: 1; } .s-header__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; } /* A dropdown wrapper is a block: its button would sit on a line of text and ride a few pixels above the other buttons. */ .s-header__actions > .dropdown { display: flex; } .s-site .s-nav-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--s-radius-sm); background: transparent; color: var(--s-ink); font: inherit; font-size: 16px; font-weight: 500; text-decoration: none; cursor: pointer; } /* A menu entry is one line: "Cursos online" broke in two at a laptop's 1280px. */ .s-site .s-nav-link, .s-header__actions .s-btn { white-space: nowrap; } /* Between the phone menu and a wide screen the bar is tighter, so a school's full menu and its two calls to action fit beside the logo. */ @media (min-width: 1200px) and (max-width: 1439.98px) { .s-header__bar { gap: 16px; } .s-header__nav { gap: 0; } .s-site .s-header__nav .s-nav-link, .s-site .s-header__actions .s-nav-link { padding: 0 9px; font-size: 15px; } .s-header__actions { gap: 6px; } } .s-site .s-nav-link:hover, .s-site .s-nav-link[aria-expanded="true"] { background: var(--s-band); color: var(--s-ink); } .s-site .s-nav-link.is-active { color: var(--s-accent); font-weight: 600; } .s-site .s-nav-link--strong { color: var(--s-accent); font-weight: 600; } .s-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--s-line); border-radius: var(--s-radius-btn); background: var(--s-surface); color: var(--s-ink); font-size: 18px; cursor: pointer; text-decoration: none; } .s-site .s-icon-btn:hover { background: var(--s-band); color: var(--s-ink); } .s-count { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--s-highlight); color: var(--s-on-highlight); font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; box-sizing: border-box; } .s-avatar { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; display: block; } /* The account menu's button is the person's own round picture, not a square icon button. */ .s-avatar-btn { display: inline-flex; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; overflow: hidden; background: var(--s-band); box-shadow: 0 0 0 1px var(--s-line); cursor: pointer; } .s-avatar-btn:hover, .s-avatar-btn[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--s-accent); } .s-site .s-menu { --bs-dropdown-min-width: 260px; --bs-dropdown-padding-y: 8px; --bs-dropdown-item-padding-x: 14px; --bs-dropdown-item-padding-y: 10px; border-radius: var(--s-radius); box-shadow: var(--s-shadow-lg); padding: 8px; } .s-site .s-menu .dropdown-item { border-radius: var(--s-radius-sm); display: flex; flex-direction: column; gap: 2px; white-space: normal; } .s-menu__title { font-weight: 600; color: var(--s-ink); } .s-menu__desc { font-size: 14px; color: var(--s-muted); } .s-header__toggle { display: none; } @media (max-width: 1199.98px) { /* Scoped like the rules that style these links, or those win and the bar overflows. */ .s-site .s-header__nav, .s-site .s-header__desktop-only { display: none; } .s-site .s-header__toggle { display: inline-flex; } } @media (max-width: 575.98px) { .s-header__bar { gap: 12px; } } /* The phone menu: an offcanvas that lists the same destinations. */ .s-site .s-drawer { --bs-offcanvas-width: min(360px, 88vw); background: var(--s-bg); } .s-drawer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .s-drawer__group { padding: 12px 0; border-top: 1px solid var(--s-line); } .s-drawer__group:first-child { border-top: 0; } .s-drawer__label { margin: 0 0 4px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--s-muted); } .s-site .s-drawer a { display: flex; align-items: center; min-height: 44px; color: var(--s-ink); text-decoration: none; font-size: 17px; } /* ── Announcement bar (admin → top notification) ─────────────────────────── */ .s-topbar { background: var(--s-topbar-bg); color: var(--s-on-topbar); font-size: 15px; } .s-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; } .s-topbar__text p { margin: 0; } .s-site .s-topbar a { color: var(--s-on-topbar); font-weight: 600; text-decoration: underline; } .s-topbar__close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: transparent; color: var(--s-on-topbar); cursor: pointer; } /* ── Floating WhatsApp (footer.php) ──────────────────────────────────────────── */ .s-site .s-whatsapp { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 1040; display: flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 999px; background: var(--s-whatsapp); color: var(--s-on-whatsapp); font-size: 30px; text-decoration: none; box-shadow: 0 12px 28px -8px rgba(0, 0, 0, .45); transition: transform .2s ease; } .s-site .s-whatsapp:hover { color: var(--s-on-whatsapp); transform: scale(1.06); } /* A ring that pulses now and then, so the eye finds it without it shouting. */ .s-whatsapp::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--s-whatsapp); animation: s-whatsapp-ring 3.2s ease-out infinite; } @keyframes s-whatsapp-ring { 0% { transform: scale(1); opacity: .7; } 45%, 100% { transform: scale(1.6); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .s-whatsapp::after { animation: none; } } /* Above a product page's buy bar on a phone. */ @media (max-width: 991.98px) { body.s-site:has(.s-buybar) .s-whatsapp { bottom: calc(92px + env(safe-area-inset-bottom)); } } /* ── A school's top strip (_utility_bar.php) ───────────────────────────────── */ .s-utility { background: var(--s-deep); color: var(--s-on-deep-muted); font-size: 13px; } .s-utility__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; } .s-utility__notice { margin: 0; color: var(--s-on-deep); font-weight: 600; display: flex; align-items: center; gap: 10px; } .s-utility__notice:not(:empty)::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--s-highlight); flex-shrink: 0; animation: s-breathe 2s infinite; } .s-utility__links { display: flex; align-items: center; gap: 24px; margin: 0; padding: 0; list-style: none; } .s-utility__links li { display: flex; align-items: center; gap: 6px; } .s-site .s-utility a { display: inline-flex; align-items: center; gap: 6px; color: var(--s-on-deep); text-decoration: none; } .s-site .s-utility a:hover { color: var(--s-highlight); } /* The short links never break in two (the address may wrap); a long announcement shrinks and wraps rather than pushing the page sideways. */ .s-utility__notice { min-width: 0; } .s-site .s-utility__links a { white-space: nowrap; } @media (max-width: 767.98px) { /* As specific as the li rule above, or the address would stay on a phone. */ .s-utility__links .s-utility__address { display: none; } .s-utility__links { gap: 14px; } .s-utility__inner { padding-top: 8px; padding-bottom: 8px; } .s-utility__notice { font-size: 12px; line-height: 1.4; } } /* ── Footer ───────────────────────────────────────────────────────────────── */ .s-footer { margin-top: var(--s-footer-gap); background: var(--s-footer-bg); color: var(--s-footer-ink); padding: 72px 0 40px; font-size: 15px; } .s-footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; } .s-footer__brand img { height: 34px; width: auto; display: block; margin-bottom: 14px; filter: var(--s-footer-logo-filter); } .s-footer__title { margin: 0 0 10px; font-weight: 700; color: var(--s-footer-strong); } .s-site .s-footer strong { color: var(--s-footer-strong); } .s-site .s-footer .form-select { background-color: var(--s-footer-control-bg); border-color: var(--s-footer-control-line); color: var(--s-footer-control-ink); } .s-footer ul { list-style: none; margin: 0; padding: 0; } .s-site .s-footer a { display: inline-flex; align-items: center; min-height: 36px; color: var(--s-footer-ink); text-decoration: none; } .s-site .s-footer a:hover { color: var(--s-footer-link-hover); } .s-footer__social { display: flex; gap: 8px; margin-top: 16px; } /* The networks on the footer's own ground (light or dark per skin), inverting on hover. */ .s-site .s-footer__social .s-icon-btn { background: var(--s-footer-control-bg); border-color: var(--s-footer-control-line); color: var(--s-footer-strong); } .s-site .s-footer__social .s-icon-btn:hover { background: var(--s-footer-strong); border-color: var(--s-footer-strong); color: var(--s-footer-bg); } .s-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--s-line); font-size: 14px; } @media (max-width: 991.98px) { .s-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .s-footer__brand { grid-column: 1 / -1; } } /* ── Page blocks ──────────────────────────────────────────────────────────── */ .s-measure { max-width: 820px; } /* Hero */ .s-hero { padding: 56px 0 88px; } .s-hero__grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 64px; align-items: center; } .s-hero__grid--solo { grid-template-columns: minmax(0, 860px); } .s-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; } .s-hero__media { aspect-ratio: 6 / 5; padding: 14px; border-radius: var(--s-radius-lg); background: var(--s-accent-soft); box-sizing: border-box; } .s-hero__media .s-media { border-radius: var(--s-radius); } @media (max-width: 991.98px) { .s-hero { padding: 24px 0 48px; } .s-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } } /* Proof strip */ .s-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 56px; padding: 28px 40px; } .s-proof__stats { display: flex; gap: 40px; margin: 0; } .s-proof__stats dd { margin: 0; } .s-proof__value { font-size: 34px; line-height: 1.1; } .s-proof__logos { flex-grow: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; list-style: none; margin: 0; padding: 0; } .s-proof__logos img { display: block; height: 40px; width: auto; max-width: 160px; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .15s ease, opacity .15s ease; } .s-proof__logos a:hover img { filter: none; opacity: 1; } @media (max-width: 575.98px) { .s-proof { padding: 22px 20px; } } /* Audiences */ .s-site .s-audience { display: flex; flex-direction: column; gap: 14px; min-height: 260px; padding: 32px; border-radius: var(--s-radius-lg); color: var(--s-ink); text-decoration: none; box-sizing: border-box; transition: transform .15s ease; } .s-site .s-audience:hover { color: var(--s-ink); transform: translateY(-2px); } .s-audience--1 { background: var(--s-tint-1); } .s-audience--2 { background: var(--s-tint-2); } .s-audience--3 { background: var(--s-tint-3); } .s-audience__label { font-size: 30px; line-height: 1.1; } .s-audience__text { color: var(--s-tint-ink); font-size: 17px; } .s-audience__more { margin-top: auto; color: var(--s-accent); } /* Steps */ .s-steps { list-style: none; margin: 0; padding: 0; } .s-step { display: flex; flex-direction: column; gap: 14px; padding: 32px; border-radius: var(--s-radius-lg); background: var(--s-band); } .s-step__n { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 999px; background: var(--s-accent); color: var(--s-on-accent); font-family: var(--s-font-display); font-weight: 700; font-size: 22px; } /* Features (on the accent band) */ .s-features__intro { max-width: 420px; margin: 0; color: var(--s-on-accent-muted); font-size: 17px; } .s-feature { display: flex; flex-direction: column; gap: 12px; min-height: 200px; padding: 28px; border-radius: var(--s-radius-lg); background: var(--s-accent-deep); border: 1px solid var(--s-accent-deep-line); color: var(--s-on-accent-muted); box-sizing: border-box; } .s-feature .s-h3 { color: var(--s-on-accent); } .s-feature__tag { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--s-accent-soft); color: var(--s-accent); font-size: 12px; font-weight: 700; } /* Plans */ .s-plan { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: var(--s-radius-lg); background: var(--s-surface); border: 1px solid var(--s-line); } .s-plan--popular { border: 2px solid var(--s-accent); box-shadow: var(--s-shadow-lg); } .s-plan__flag { position: absolute; top: -13px; left: 24px; padding: 4px 12px; border-radius: 999px; background: var(--s-accent); color: var(--s-on-accent); font-size: 12px; font-weight: 700; } .s-plan__name { margin: 0; font-size: 17px; font-weight: 700; } .s-plan__price { margin: 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .s-plan__price .s-display { font-size: 36px; line-height: 1; } .s-plan__list { list-style: none; margin: 0 0 auto; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: var(--s-muted); } .s-plan__list li { display: flex; gap: 8px; align-items: flex-start; } .s-plan__list .bi { color: var(--s-accent); } /* Testimonials */ .s-quote { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; margin: 0; font-size: 17px; } .s-quote__who { display: flex; align-items: center; gap: 12px; font-weight: 600; } /* Learners band */ .s-learn { padding: 48px; border-radius: var(--s-radius-lg); background: var(--s-band); } .s-site .s-course-mini { display: flex; gap: 14px; align-items: center; padding: 10px; border-radius: var(--s-radius); background: var(--s-surface); color: var(--s-ink); text-decoration: none; } .s-site .s-course-mini:hover { color: var(--s-ink); box-shadow: var(--s-shadow); } .s-course-mini img { width: 76px; height: 76px; flex-shrink: 0; border-radius: var(--s-radius-sm); object-fit: cover; background: var(--s-tint-3); } .s-course-mini > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .s-course-mini__title { font-family: var(--s-font-display); font-weight: 600; font-size: 16px; line-height: 1.25; letter-spacing: -0.01em; } .s-course-mini__price { font-size: 15px; font-weight: 700; } @media (max-width: 575.98px) { .s-learn { padding: 24px 16px; } } /* Closing call to action */ .s-closing { text-align: center; } .s-closing .s-container { display: flex; flex-direction: column; align-items: center; gap: 22px; } .s-closing__copy { display: flex; flex-direction: column; align-items: center; gap: 22px; } .s-closing .s-btn-row { justify-content: center; } /* Centred page head (pricing) */ .s-hero--center { text-align: center; padding-bottom: 56px; } .s-hero--center .s-container { display: flex; flex-direction: column; align-items: center; gap: 20px; } .s-hero--center .s-lead { max-width: 640px; } /* ── Eyebrows and the buttons for dark bands and photos ─────────────────────── */ /* An eyebrow may be a heading (a section with no other title), so it beats the headings' type. */ .s-site .s-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-family: var(--s-font-body); font-size: 12px; font-weight: 600; letter-spacing: var(--s-eyebrow-track); text-transform: uppercase; color: var(--s-muted); } .s-eyebrow::before { content: ""; width: var(--s-eyebrow-mark-width); height: var(--s-eyebrow-mark-height); border-radius: var(--s-eyebrow-mark-radius); background: var(--s-eyebrow-mark); flex-shrink: 0; } .s-site .s-eyebrow--on-deep { color: var(--s-on-deep-muted); } .s-site .s-btn--highlight { background: var(--s-highlight); color: var(--s-on-highlight); box-shadow: var(--s-btn-highlight-shadow); } .s-site .s-btn--highlight:hover { background: var(--s-btn-highlight-hover-bg); color: var(--s-btn-highlight-hover-ink); transform: var(--s-btn-hover-lift); } /* On a photo: a pane of frosted glass. */ .s-site .s-btn--glass { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .28); color: var(--s-on-deep); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .s-site .s-btn--glass:hover { background: rgba(255, 255, 255, .2); color: var(--s-on-deep); } /* A dot that breathes: something is live (admissions open). */ .s-live { display: inline-flex; align-items: center; gap: 8px; letter-spacing: 0; text-transform: none; font-weight: 600; } .s-live::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: var(--s-highlight); animation: s-breathe 2s infinite; } @keyframes s-breathe { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--s-highlight) 60%, transparent); } 70% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--s-highlight) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--s-highlight) 0%, transparent); } } .s-site .s-btn--on-deep { border-color: var(--s-deep-line); color: var(--s-on-deep); background: transparent; } .s-site .s-btn--on-deep:hover { background: var(--s-on-deep); color: var(--s-deep); } .s-voices { background: var(--s-deep); color: var(--s-on-deep); } .s-voices__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 96px; } .s-voices__grid--solo { grid-template-columns: minmax(0, 860px); } .s-voices__lead { display: flex; flex-direction: column; gap: 32px; margin: 0; } .s-voices__lead blockquote { margin: 0; } .s-voices__lead p { margin: 0; font-family: var(--s-font-display); font-weight: 600; font-size: clamp(26px, 3vw, 42px); line-height: 1.18; letter-spacing: -0.02em; text-wrap: balance; } .s-voices__lead--long p { font-size: clamp(20px, 2vw, 26px); line-height: 1.35; } .s-voices__others { display: flex; flex-direction: column; justify-content: flex-end; gap: 28px; } .s-voices__quote { margin: 0; display: flex; flex-direction: column; gap: 14px; padding-top: 22px; border-top: 1px solid var(--s-deep-line); } .s-voices__quote blockquote, .s-voices__quote p { margin: 0; } .s-voices__quote p { font-size: 16px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .s-voices .s-quote__who { color: var(--s-on-deep); } @media (max-width: 991.98px) { .s-voices__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } } /* Plans grid on the pricing page: room for the "most popular" flag */ .s-plans { padding-top: 14px; } /* Comparison table */ /* Positioned, so the visually-hidden labels in its cells (position: absolute) are clipped by its scroll instead of widening the page on a phone. */ .s-table-wrap { position: relative; overflow-x: auto; max-width: 100%; min-width: 0; border: 1px solid var(--s-line); border-radius: var(--s-radius); background: var(--s-surface); } .s-compare { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; } .s-compare th, .s-compare td { padding: 16px 20px; border-bottom: 1px solid var(--s-line); text-align: center; } .s-compare tbody tr:last-child th, .s-compare tbody tr:last-child td { border-bottom: 0; } .s-compare thead th { font-weight: 700; } .s-compare tbody th { text-align: left; font-weight: 500; } /* On a narrow screen the table scrolls sideways; what each row is stays in view. */ .s-compare tbody th, .s-compare thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--s-surface); } .s-compare .is-popular { background: var(--s-accent-soft); } .s-compare thead .is-popular { color: var(--s-accent); } .s-compare__yes { color: var(--s-accent); font-size: 20px; } .s-compare__no { color: var(--s-faint); } /* Accent banner (closing call to action) */ .s-banner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 48px; padding: 56px; border-radius: var(--s-radius-lg); background: var(--s-accent); color: var(--s-on-accent); } .s-banner .s-h2 { color: var(--s-on-accent); } .s-banner__text { margin: 10px 0 0; color: var(--s-on-accent-muted); font-size: 17px; } @media (max-width: 575.98px) { .s-banner { padding: 32px 20px; } } /* Feature blocks (organisation landings) */ .s-blocks { display: flex; flex-direction: column; gap: 96px; } .s-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; } .s-block--flip .s-block__media { order: -1; } .s-block--solo { grid-template-columns: minmax(0, 820px); } .s-block__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } .s-block__media { aspect-ratio: 4 / 3; } @media (max-width: 991.98px) { .s-blocks { gap: 56px; } .s-block { grid-template-columns: minmax(0, 1fr); gap: 24px; } .s-block--flip .s-block__media { order: 0; } } .s-site .s-audience--compact { min-height: 0; padding: 24px 28px; } .s-audience--compact .s-audience__label { font-size: 24px; } /* Signup */ .s-signup__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; align-items: start; } .s-signup__form { display: flex; flex-direction: column; gap: 18px; } .s-signup__plan { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 16px; padding: 32px; border-radius: var(--s-radius-lg); background: var(--s-accent-soft); color: var(--s-accent-soft-ink); } .s-signup__plan .s-plan__list { color: var(--s-accent-soft-ink); } @media (max-width: 991.98px) { .s-signup__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } .s-signup__plan { position: static; } } /* Forms */ .s-form { display: flex; flex-direction: column; gap: 18px; } .s-field { display: flex; flex-direction: column; gap: 6px; } .s-field .form-label { margin: 0; font-weight: 600; } .s-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } @media (max-width: 575.98px) { .s-field-row { grid-template-columns: minmax(0, 1fr); } } .s-required { color: var(--s-accent); } .s-password { position: relative; } .s-password .form-control { padding-right: 52px; } .s-password__toggle { position: absolute; top: 2px; right: 2px; width: 44px; height: 44px; border: 0; background: transparent; color: var(--s-muted); cursor: pointer; } .s-notice { display: flex; gap: 10px; align-items: flex-start; padding: 14px 18px; border-radius: var(--s-radius-sm); font-size: 15px; } .s-notice--ok { background: var(--s-accent-soft); color: var(--s-accent-soft-ink); } .s-notice--error { background: var(--s-tint-2); color: var(--s-ink); } /* ── Product pages (course, programme) ────────────────────────────────────── */ .s-product { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "hero aside" "body aside"; column-gap: 56px; padding-top: 32px; padding-bottom: 72px; } .s-product__hero { grid-area: hero; display: flex; flex-direction: column; gap: 18px; padding-bottom: 40px; } .s-product__aside { grid-area: aside; } .s-product__body { grid-area: body; display: flex; flex-direction: column; gap: 20px; min-width: 0; } .s-product__title { font-size: calc(clamp(34px, 4.4vw, 60px) * var(--s-h1-scale)); line-height: 1.02; } .s-product__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; } .s-product__fact { padding: 6px 12px; border-radius: 999px; background: var(--s-band); font-size: 14px; } .s-site .s-product__rating { display: inline-flex; align-items: center; gap: 6px; color: var(--s-ink); text-decoration: none; margin-right: 6px; } .s-product__by { margin: 0; } @media (max-width: 991.98px) { .s-product { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "aside" "body"; padding-top: 16px; padding-bottom: 32px; } .s-product__hero { padding-bottom: 24px; } .s-product__aside { margin-bottom: 20px; } } .s-crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; } .s-site .s-crumbs a { color: var(--s-muted); text-decoration: none; } .s-site .s-crumbs a:hover { color: var(--s-ink); } .s-crumbs a + a::before { content: "/"; margin-right: 6px; color: var(--s-faint); } .s-stars { display: inline-flex; gap: 2px; color: var(--s-highlight); font-size: 14px; } /* The purchase card */ /* Sticky by a top edukall-site-sticky.js moves, so a card taller than the window still shows its buttons. */ .s-buy { position: sticky; top: var(--s-sticky-top, 96px); overflow: hidden; border: 1px solid var(--s-line); border-radius: var(--s-radius-lg); background: var(--s-surface); box-shadow: var(--s-shadow); } .s-buy__media { position: relative; aspect-ratio: 16 / 10; background: var(--s-tint-3); } .s-buy__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .s-buy__play { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border: 0; border-radius: 999px; background: var(--s-surface); color: var(--s-ink); font-size: 34px; display: flex; align-items: center; justify-content: center; box-shadow: var(--s-shadow-lg); cursor: pointer; } .s-buy__body { display: flex; flex-direction: column; gap: 12px; padding: 24px; } .s-buy__price { margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; } .s-buy__price .s-display { font-size: 28px; line-height: 1; } /* A price is one piece: "$4,200" and "MXN" never on two lines, in the box or the phone's bar. */ .s-buy__price .s-display, .s-buybar__price .s-display { white-space: nowrap; } .s-buy__secure { margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: var(--s-muted); } .s-buy__includes { list-style: none; margin: 8px 0 0; padding: 16px 0 0; border-top: 1px solid var(--s-line); display: flex; flex-direction: column; gap: 10px; font-size: 15px; } .s-buy__includes li { display: flex; align-items: center; gap: 10px; } .s-buy__includes .bi { color: var(--s-accent); font-size: 18px; } .s-save { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 0; background: transparent; color: var(--s-muted); font: inherit; font-weight: 600; cursor: pointer; } .s-save[aria-pressed="true"] { color: var(--s-accent); } @media (max-width: 991.98px) { .s-buy { position: static; } } .s-share__title { margin: 8px 0; font-size: 14px; font-weight: 600; } .ek-share .d-flex .s-icon-btn { width: 40px; height: 40px; } /* Content panels */ .s-panel { padding: 32px; border-radius: var(--s-radius-lg); background: var(--s-surface); border: 1px solid var(--s-line); } .s-panel > .s-h3, .s-panel__head { margin-bottom: 18px; } .s-panel__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; } .s-panel__head .s-h3 { margin: 0; } .s-panel--tint { background: var(--s-accent-soft); border-color: transparent; color: var(--s-accent-soft-ink); } @media (max-width: 575.98px) { .s-panel { padding: 22px 18px; } } .s-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px 28px; } .s-ticks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 767.98px) { .s-ticks--2 { grid-template-columns: minmax(0, 1fr); } } .s-ticks li { display: flex; gap: 10px; align-items: flex-start; } .s-ticks .bi { color: var(--s-accent); flex-shrink: 0; margin-top: 2px; } .s-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .s-chips li { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--s-line); background: var(--s-bg); font-size: 14px; } /* Rich text written in an editor */ .s-prose { font-size: 16px; line-height: 1.7; overflow-wrap: anywhere; } .s-prose > :first-child { margin-top: 0; } .s-prose > :last-child { margin-bottom: 0; } .s-prose img, .s-prose iframe, .s-prose video { max-width: 100%; border-radius: var(--s-radius-sm); } .s-prose img, .s-prose video { height: auto; } /* An embedded video: inside the editor's 16:9 box it fills the box (height: auto collapsed it to a strip); on its own it keeps the video's shape across the column. */ .s-prose > iframe, .s-prose :not(.ratio) > iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; } .s-prose h2, .s-prose h3, .s-prose h4 { font-size: 20px; margin: 24px 0 8px; letter-spacing: -0.01em; } .s-prose--sm { font-size: 15px; } /* Accordions (curriculum, FAQs): native
, no script */ .s-accordion { display: flex; flex-direction: column; border: 1px solid var(--s-line); border-radius: var(--s-radius); overflow: hidden; } .s-accordion details + details { border-top: 1px solid var(--s-line); } .s-accordion summary { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 14px 18px; list-style: none; cursor: pointer; font-weight: 600; } .s-accordion summary::-webkit-details-marker { display: none; } .s-accordion summary > span:first-child { flex-grow: 1; } .s-accordion summary::after { content: "\F282"; font-family: "bootstrap-icons"; font-weight: 400; color: var(--s-muted); transition: transform .15s ease; } .s-accordion details[open] > summary::after { transform: rotate(180deg); } .s-accordion summary:hover { background: var(--s-bg); } .s-accordion__answer { padding: 0 18px 18px; } .s-lessons { list-style: none; margin: 0; padding: 0 18px 10px; } .s-lessons li { display: flex; align-items: center; gap: 12px; min-height: 44px; border-top: 1px solid var(--s-line); font-size: 15px; } .s-lessons .bi { color: var(--s-accent); } .s-lessons__title { flex-grow: 1; min-width: 0; } .s-link-button { border: 0; background: transparent; padding: 6px 0; color: var(--s-accent); font: inherit; font-weight: 600; cursor: pointer; } /* People */ .s-person__name { margin: 0; font-family: var(--s-font-display); font-weight: 700; font-size: 20px; } /* Ratings and reviews */ .s-rating { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; align-items: center; margin-bottom: 16px; } .s-rating__score { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .s-rating__score .s-display { font-size: 48px; line-height: 1; } .s-rating__bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .s-rating__bars li { display: grid; grid-template-columns: 48px minmax(0, 1fr) 44px; align-items: center; gap: 10px; } .s-rating__bars .bi { color: var(--s-highlight); font-size: 12px; } .s-rating__bars progress { width: 100%; height: 8px; border: 0; border-radius: 999px; overflow: hidden; background: var(--s-band); appearance: none; } .s-rating__bars progress::-webkit-progress-bar { background: var(--s-band); } .s-rating__bars progress::-webkit-progress-value { background: var(--s-highlight); border-radius: 999px; } .s-rating__bars progress::-moz-progress-bar { background: var(--s-highlight); border-radius: 999px; } @media (max-width: 575.98px) { .s-rating { grid-template-columns: minmax(0, 1fr); } } .s-review { margin: 0; padding: 18px 0; border-top: 1px solid var(--s-line); } .s-review__who { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .s-review__who > span:nth-child(2) { flex-grow: 1; } /* A product card (related items) */ .s-site .s-card-link { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--s-line); border-radius: var(--s-radius); background: var(--s-surface); color: var(--s-ink); text-decoration: none; transition: box-shadow .15s ease; } .s-site .s-card-link:hover { color: var(--s-ink); box-shadow: var(--s-shadow); } .s-card-link img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--s-tint-3); display: block; } .s-card-link__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 20px; } .s-card-link__title { font-family: var(--s-font-display); font-weight: 600; font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; } .s-card-link__price { font-weight: 700; } /* Who offers it (marketplace sites only) */ .s-site .s-offered { align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border: 1px solid var(--s-line); border-radius: 999px; background: var(--s-surface); color: var(--s-ink); text-decoration: none; } .s-site .s-offered:hover { color: var(--s-ink); border-color: var(--s-accent); } .s-offered img { width: 40px; height: 40px; border-radius: 999px; object-fit: contain; background: var(--s-surface); } .s-institution { display: flex; gap: 20px; align-items: flex-start; } .s-institution img { width: 96px; height: 96px; flex-shrink: 0; border-radius: var(--s-radius-sm); object-fit: contain; border: 1px solid var(--s-line); background: var(--s-surface); } @media (max-width: 575.98px) { .s-institution { flex-direction: column; } } /* Programme: where enrolment stands (under the title) */ .s-status { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.2fr) minmax(0, 0.9fr); border: 1px solid var(--s-line); border-radius: var(--s-radius); background: var(--s-surface); } .s-status__cell { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; min-width: 0; } .s-status__cell + .s-status__cell { border-left: 1px solid var(--s-line); } .s-status__label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--s-muted); } .s-status__value { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-weight: 600; } .s-status__value--ok { color: var(--s-accent); } .s-status__value--hot { color: var(--s-ink); } /* "Select one": the dates are choices, which a pill alone does not say. */ .s-status__hint { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--s-accent); } .s-date__schedule { font-weight: 400; opacity: .8; } .s-status .s-date { gap: 4px; min-height: 32px; padding: 0 10px; font-size: 13px; } .s-dates { display: flex; flex-wrap: wrap; gap: 6px; } .s-date { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--s-line); border-radius: 999px; background: var(--s-bg); color: var(--s-ink); font: inherit; font-size: 14px; font-weight: 600; } button.s-date { cursor: pointer; } button.s-date:hover { border-color: var(--s-accent); color: var(--s-accent); } button.s-date[aria-pressed="true"] { background: var(--s-accent); border-color: var(--s-accent); color: var(--s-on-accent); } .s-date--hot { background: var(--s-tint-2); border-color: transparent; } /* On a phone the two short facts share a row and the dates take the width below them. */ @media (max-width: 767.98px) { .s-status { grid-template-columns: repeat(2, minmax(0, 1fr)); } .s-status__cell--wide { grid-column: 1 / -1; order: 3; border-left: 0 !important; border-top: 1px solid var(--s-line); } } /* Programme: price extras, the chosen cohort, costs */ .s-then { margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--s-line); } .s-then ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 15px; } .s-days { padding: 12px 14px; border-radius: var(--s-radius-sm); background: var(--s-band); font-size: 14px; } .s-days[hidden] { display: none; } .s-days ul { margin: 0 0 6px; padding-left: 18px; } .s-installments { margin: 8px 0 0; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--s-radius-sm); background: var(--s-accent-soft); color: var(--s-accent-soft-ink); font-size: 14px; } .s-installments[hidden], .s-notice[hidden] { display: none; } .s-notice--hot { background: var(--s-tint-2); color: var(--s-ink); } .s-costs { margin: 0; display: flex; flex-direction: column; } .s-costs > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--s-line); } .s-costs > div:first-child { border-top: 0; padding-top: 0; } .s-costs dt { font-weight: 500; } .s-costs dd { margin: 0; font-weight: 700; text-align: right; } /* A cost that does not apply is a remark, not a figure. */ .s-costs dd del { font-size: 15px; font-weight: 400; letter-spacing: 0; } .s-site .s-costs .s-costs__none { font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--s-muted); } .s-showcase { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; } .s-showcase img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--s-radius-sm); display: block; } .s-lessons--courses li { padding: 10px 0; align-items: flex-start; } /* A person to ask, beside the purchase */ .s-advice { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px dashed var(--s-line); border-radius: var(--s-radius-sm); background: transparent; color: var(--s-ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; } .s-advice:hover { border-color: var(--s-accent); background: var(--s-bg); } .s-advice .bi { font-size: 22px; color: var(--s-accent); } /* The advisor's floating button: stacked above the WhatsApp button (62px, 14px apart) when there is one, and above a phone's purchase bar — fixed places, clear of the iPhone's home indicator, so both move together as the browser's own bar comes and goes. */ body.s-site:has(.s-whatsapp) .eadv-launcher { bottom: calc(96px + env(safe-area-inset-bottom)); } @media (max-width: 991.98px) { body.s-site:has(.s-buybar) .eadv-launcher { bottom: calc(92px + env(safe-area-inset-bottom)); } } @media (max-width: 991.98px) { body.s-site:has(.s-buybar):has(.s-whatsapp) .eadv-launcher { bottom: calc(166px + env(safe-area-inset-bottom)); } } /* Photo viewer (student gallery) */ .s-showcase a { display: block; border-radius: var(--s-radius-sm); overflow: hidden; cursor: zoom-in; } .s-showcase img { transition: transform .2s ease; } .s-showcase a:hover img { transform: scale(1.03); } .s-lightbox .modal-content { position: relative; background: var(--s-viewer-bg); border: 0; border-radius: var(--s-radius); overflow: hidden; } .s-lightbox__figure { margin: 0; display: flex; flex-direction: column; } .s-lightbox__figure img { display: block; width: 100%; min-height: 40vh; max-height: 80vh; object-fit: contain; background: var(--s-viewer-bg); } .s-lightbox__figure figcaption { display: flex; justify-content: space-between; gap: 16px; padding: 12px 18px; color: var(--s-viewer-ink); font-size: 14px; } .s-lightbox__count { color: var(--s-viewer-muted); white-space: nowrap; } .s-lightbox__close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 36px; height: 36px; border-radius: 999px; background-color: var(--s-viewer-control); opacity: 1; } .s-lightbox__nav { position: absolute; top: 40%; z-index: 2; width: 48px; height: 48px; border: 0; border-radius: 999px; background: var(--s-viewer-control); color: var(--s-viewer-ink); font-size: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .s-lightbox__nav[hidden] { display: none; } .s-lightbox__nav:hover { background: var(--s-viewer-control-hover); } .s-lightbox__nav--prev { left: 12px; } .s-lightbox__nav--next { right: 12px; } /* Programme: long page helpers */ .s-stack { display: flex; flex-direction: column; gap: 20px; } .s-subnav { position: sticky; top: 76px; z-index: 5; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 6px; border: 1px solid var(--s-line); border-radius: 999px; background: var(--s-surface); box-shadow: var(--s-shadow); } .s-subnav::-webkit-scrollbar { display: none; } .s-site .s-subnav a { flex-shrink: 0; padding: 8px 14px; border-radius: 999px; color: var(--s-muted); font-size: 14px; font-weight: 600; text-decoration: none; } .s-site .s-subnav a:hover { color: var(--s-ink); background: var(--s-band); } .s-site .s-subnav a.is-active { color: var(--s-on-accent); background: var(--s-accent); } .s-product__body [id] { scroll-margin-top: 150px; } .s-collapsible { max-height: 14em; overflow: hidden; position: relative; } .s-collapsible:not(.is-open)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4em; background: linear-gradient(to bottom, transparent, var(--s-surface)); } .s-collapsible.is-open { max-height: none; } .s-includes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; } .s-includes li { display: flex; gap: 12px; align-items: flex-start; } .s-includes .bi { color: var(--s-accent); font-size: 20px; line-height: 1.2; } /* The line that explains an item reads at the list's own size, only quieter: set smaller, the two items that carry one looked like footnotes beside the rest. */ .s-includes__hint { display: block; color: var(--s-muted); } @media (max-width: 767.98px) { .s-includes { grid-template-columns: minmax(0, 1fr); } } .s-team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (max-width: 767.98px) { .s-team { grid-template-columns: minmax(0, 1fr); } } .s-site .s-team__card { display: flex; gap: 14px; align-items: flex-start; height: 100%; padding: 16px; border: 1px solid var(--s-line); border-radius: var(--s-radius); color: var(--s-ink); text-decoration: none; box-sizing: border-box; } .s-site .s-team__card:hover { color: var(--s-ink); background: var(--s-bg); } .s-team__card img { width: 72px; height: 72px; flex-shrink: 0; border-radius: 999px; object-fit: cover; background: var(--s-tint-3); } .s-team__card > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .s-team__name { font-family: var(--s-font-display); font-weight: 700; font-size: 17px; } .s-team__bio { font-size: 14px; color: var(--s-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Phone purchase bar */ .s-buybar { display: none; } @media (max-width: 991.98px) { .s-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex; align-items: center; gap: 14px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--s-buybar-bg); -webkit-backdrop-filter: var(--s-buybar-blur); backdrop-filter: var(--s-buybar-blur); border-top: 1px solid var(--s-line); box-shadow: var(--s-buybar-shadow); } .s-buybar .s-btn { flex: 1 1 auto; width: auto; min-height: 50px; padding: 0 18px; white-space: nowrap; } .s-buybar__price { flex-shrink: 1; min-width: 0; } .s-buybar__price { display: flex; flex-direction: column; line-height: 1.1; } .s-buybar__price .s-display { font-size: 20px; } body.s-site:has(.s-buybar) { padding-bottom: 76px; } } /* Preview modal */ .s-preview { border-radius: var(--s-radius); overflow: hidden; } .s-preview .modal-header { border-bottom: 1px solid var(--s-line); } .s-preview__loading { display: flex; align-items: center; justify-content: center; min-height: 240px; color: var(--s-accent); } /* The showcase layout (site_product_layout() 'showcase'): the page opens on its photo, with the enrolment status along the photo's foot and the buy box rising into it from the column beside; the body reads as open sections — a tinted "what you will learn", tiles, a timeline, a mosaic. */ .s-phero { position: relative; overflow: hidden; background: var(--s-deep-3); color: var(--s-on-deep); } .s-phero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 30%; } /* The words sit on the left 55%: the veil stays nearly opaque across all of it, whatever the photo is like there, and lets the photo show only on the right, where nothing is written. The status box at the foot gets a dark ground of its own. The photo holds still: a drift behind text is what the eye reads, not the text. */ .s-phero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--s-veil), .95) 0%, rgba(var(--s-veil), .92) 55%, rgba(var(--s-veil), .45) 72%, rgba(var(--s-veil), .12) 90%), linear-gradient(0deg, rgba(var(--s-veil), .95) 0%, rgba(var(--s-veil), 0) 45%); } .s-phero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: 56px; min-height: 520px; padding-top: 56px; box-sizing: border-box; } .s-phero__copy { grid-column: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 760px; padding-bottom: 40px; } .s-phero__status { grid-column: 1; align-self: end; } .s-site .s-phero .s-crumbs a { color: var(--s-on-deep-muted); } .s-site .s-phero .s-crumbs a:hover { color: var(--s-on-deep); } .s-phero .s-crumbs a + a::before { color: var(--s-on-deep-muted); } .s-site .s-phero h1 { color: var(--s-on-deep); font-size: calc(clamp(40px, 5.6vw, 80px) * var(--s-h1-scale)); line-height: .95; letter-spacing: -0.05em; font-weight: 800; } .s-phero .s-lead { color: var(--s-on-deep-muted); max-width: 620px; } .s-phero__tag { padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--s-highlight) 16%, transparent); color: var(--s-highlight-soft); font-size: 13px; font-weight: 700; border: 1px solid color-mix(in srgb, var(--s-highlight) 45%, transparent); } .s-phero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; color: var(--s-on-deep-muted); font-size: 15px; } .s-phero__play { display: inline-flex; align-items: center; gap: 12px; padding: 0; border: 0; background: transparent; color: var(--s-on-deep); font: inherit; font-weight: 600; cursor: pointer; } .s-phero__play-icon { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 999px; background: var(--s-surface); color: var(--s-deep); font-size: 24px; transition: transform .15s ease; position: relative; } .s-phero__play:hover .s-phero__play-icon { transform: scale(1.06); } .s-site .s-phero .s-offered { background: transparent; border-color: var(--s-deep-line); color: var(--s-on-deep); } .s-phero .s-status { border: 1px solid var(--s-glass-line); border-radius: 22px 22px 0 0; background: var(--s-glass); color: var(--s-on-deep); border-bottom: 0; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } .s-phero .s-status__cell + .s-status__cell { border-left-color: var(--s-deep-line); } .s-phero .s-status__label, .s-phero .s-status .s-muted { color: var(--s-on-deep-muted); } .s-phero .s-status__value, .s-phero .s-status__value--hot { color: var(--s-on-deep); } .s-phero .s-status__value--ok { color: var(--s-highlight); } .s-site .s-phero .s-status a { color: var(--s-on-deep); } .s-site .s-phero .s-status a:hover { color: var(--s-highlight); } /* The same pill as on a light page, in the dark band's colours. */ .s-phero .s-date { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .2); color: var(--s-on-deep); } .s-phero .s-status__cell--wide { border-top-color: var(--s-deep-line); } .s-phero .s-status__hint { color: var(--s-highlight); } .s-phero button.s-date:hover { border-color: var(--s-highlight); color: var(--s-highlight); } .s-phero button.s-date[aria-pressed="true"] { background: var(--s-highlight); border-color: var(--s-highlight); color: var(--s-on-highlight); } .s-phero .s-date--hot { background: var(--s-highlight); color: var(--s-on-highlight); } /* The photo layout's body is built like the classic one: every section a white card on a band, one heading size, no cards inside cards. The skin shows in the header, the buy box and the accents, not in a different arrangement per section — which read as disorder. */ .s-site main:has(.s-product--showcase) { background: var(--s-band); } /* The same rounding as the buy box and the status box they sit beside. */ .s-site .s-product--showcase .s-panel { border-radius: 20px; } .s-product--showcase { grid-template-areas: "body aside"; } .s-product--showcase .s-product__aside { position: relative; z-index: 2; margin-top: -260px; } /* On the photo an accented word runs warm. */ .s-phero { --s-accent-paint: var(--s-accent-paint-on-deep); } /* A skin without a paint for dark bands sets the accented words in its marker colour, not in the action colour, which barely shows on the dark header. */ .s-site .s-phero .s-accent { color: var(--s-highlight); } .s-phero__play-icon::after { content: ""; position: absolute; inset: -6px; border-radius: 99px; border: 2px solid rgba(255, 255, 255, .5); animation: s-whatsapp-ring 2.6s ease-out infinite; } .s-phero .s-status__value--ok::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: var(--s-highlight); animation: s-breathe 2s infinite; } .s-phero .s-status__value--ok .bi { display: none; } .s-site .s-product--showcase .s-buy { border: 0; border-radius: 26px; box-shadow: 0 50px 90px -40px color-mix(in srgb, var(--s-deep) 55%, transparent), 0 0 0 1px color-mix(in srgb, var(--s-accent) 8%, transparent); } .s-product--showcase .s-buy::before { content: ""; display: block; height: 5px; background: var(--s-gradient); } .s-product--showcase .s-buy__body { padding: 30px; gap: 14px; } /* The price is read, not shouted: the same measure as the classic box. */ .s-product--showcase .s-buy__price .s-display { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; } .s-product--showcase .s-installments { border-radius: 14px; background: linear-gradient(120deg, color-mix(in srgb, var(--s-accent) 9%, transparent), color-mix(in srgb, var(--s-highlight) 12%, transparent)); color: var(--s-accent-soft-ink); } .s-site .s-product--showcase .form-select { height: 52px; border-radius: 14px; } .s-site .s-product--showcase .s-buy .s-btn--primary { min-height: 62px; border-radius: 16px; font-size: 17px; font-weight: 700; box-shadow: 0 18px 36px -14px color-mix(in srgb, var(--s-accent) 80%, transparent); } .s-product--showcase .s-advice { border-radius: 14px; } .s-site .s-product--showcase .s-panel--tint { background: radial-gradient(500px 300px at 100% 0%, color-mix(in srgb, var(--s-highlight) 14%, transparent), transparent 70%), radial-gradient(500px 300px at 0% 100%, color-mix(in srgb, var(--s-accent-2) 10%, transparent), transparent 70%), var(--s-surface); border-color: var(--s-line); } .s-product--showcase .s-panel--tint .s-ticks .bi { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 9px; background: var(--s-gradient); color: var(--s-on-accent); font-size: 16px; } /* Imago's curriculum keeps its timeline: the terms as cards on a line, numbered. */ /* Each term is its own card: its border is a shadow, which the list's overflow clipped in places. */ .s-product--showcase #s-curriculum .s-accordion { position: relative; padding-left: 44px; counter-reset: s-term; border: 0; overflow: visible; } /* The hover tint follows the card's corners instead of squaring them off. */ .s-product--showcase #s-curriculum summary { border-radius: 18px; } .s-product--showcase #s-curriculum details[open] > summary { border-radius: 18px 18px 0 0; } .s-product--showcase #s-curriculum .s-accordion::before { content: ""; position: absolute; left: 15px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(180deg, var(--s-accent), var(--s-highlight)); } .s-product--showcase #s-curriculum details { position: relative; margin-bottom: 12px; border: 0; border-radius: 18px; background: var(--s-surface); box-shadow: 0 0 0 1px var(--s-line); counter-increment: s-term; } .s-product--showcase #s-curriculum details::before { content: counter(s-term); position: absolute; left: -44px; top: 16px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 99px; background: var(--s-surface); box-shadow: 0 0 0 2px var(--s-accent-2); font-size: 13px; font-weight: 700; color: var(--s-accent); } .s-product--showcase #s-curriculum details[open] { box-shadow: 0 30px 50px -34px color-mix(in srgb, var(--s-accent) 55%, transparent), 0 0 0 1.5px color-mix(in srgb, var(--s-accent) 25%, transparent); } .s-product--showcase .s-showcase { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 210px; gap: 12px; } .s-product--showcase .s-showcase li:nth-child(6n+1) { grid-column: span 2; } .s-product--showcase .s-showcase li:nth-child(6n+2) { grid-row: span 2; } .s-product--showcase .s-showcase li:nth-child(6n) { grid-column: span 2; } .s-product--showcase .s-showcase a, .s-product--showcase .s-showcase img { display: block; width: 100%; height: 100%; border-radius: 18px; object-fit: cover; } .s-product--showcase .s-team__card { border: 0; border-radius: 18px; box-shadow: 0 0 0 1px var(--s-line); } .s-product--showcase .s-panel--scholarship { position: relative; padding: 28px !important; border-radius: 22px !important; } .s-product--showcase .s-panel--scholarship::before { content: ""; position: absolute; inset: 0; border-radius: 22px; padding: 1.5px; background: var(--s-gradient); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } @media (max-width: 991.98px) { /* Stacked: the photo shows as a band at the top, and the veil is dark by the time the title starts. */ .s-phero::after { background: linear-gradient(180deg, rgba(var(--s-veil), .3) 0%, rgba(var(--s-veil), .88) 13%, rgba(var(--s-veil), .96) 55%); } .s-phero__inner { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 110px; } .s-phero__copy { padding-bottom: 24px; } .s-phero__status { margin: 0 calc(-1 * var(--s-gutter)); } .s-product--showcase { grid-template-areas: "aside" "body"; } } /* On a phone a band of picture above the title is enough: 150px of it pushed the title and the price below the first screen. */ @media (max-width: 575.98px) { .s-phero__inner { padding-top: 56px; } } @media (max-width: 991.98px) { .s-product--showcase .s-product__aside { margin-top: 20px; } .s-product--showcase .s-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 140px; } .s-product--showcase .s-showcase li:nth-child(6n+2) { grid-row: auto; } } @keyframes s-kenburns { from { transform: scale(1.02); } to { transform: scale(1.12) translate(-1.5%, 1%); } } /* ── Bootstrap bridge ─────────────────────────────────────────────────────── */ .s-site { --bs-body-bg: var(--s-bg); --bs-body-color: var(--s-ink); --bs-body-font-family: var(--s-font-body); --bs-border-color: var(--s-line); --bs-secondary-color: var(--s-muted); --bs-primary: var(--s-accent); --bs-dropdown-bg: var(--s-surface); --bs-dropdown-border-color: var(--s-line); --bs-dropdown-link-hover-bg: var(--s-band); --bs-dropdown-link-active-bg: var(--s-accent-soft); --bs-dropdown-link-active-color: var(--s-ink); } .s-site .dropdown-menu { --bs-dropdown-bg: var(--s-surface); --bs-dropdown-border-color: var(--s-line); --bs-dropdown-link-hover-bg: var(--s-band); --bs-dropdown-link-active-bg: var(--s-accent-soft); --bs-dropdown-link-active-color: var(--s-ink); } .s-site .form-control, .s-site .form-select { background-color: var(--s-surface); border-color: var(--s-line); border-radius: var(--s-radius-sm); min-height: 48px; } .s-site .form-control:focus, .s-site .form-select:focus { border-color: var(--s-accent); box-shadow: 0 0 0 3px var(--s-accent-soft); } /* ── Catalogues (programs.php, courses.php via _catalog.php) ──────────────── */ .s-catalog { padding-top: 32px; padding-bottom: 72px; } .s-catalog__head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; } .s-catalog__layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: start; } @media (max-width: 991.98px) { .s-catalog__layout { grid-template-columns: minmax(0, 1fr); } } /* Facets: a column on a desktop, a drawer (offcanvas-lg) on a phone */ .s-site .s-catalog__filters { --bs-offcanvas-width: min(360px, 88vw); --bs-offcanvas-bg: var(--s-bg); } @media (min-width: 992px) { .s-catalog__filters { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; } .s-catalog__filters .offcanvas-header { display: none; } } .s-catalog__filters .offcanvas-header { border-bottom: 1px solid var(--s-line); } @media (max-width: 991.98px) { .s-catalog__filters .offcanvas-body { padding: 20px var(--s-gutter) 32px; } } .s-facets { width: 100%; display: flex; flex-direction: column; gap: 28px; } .s-facet { margin: 0; padding: 0; border: 0; min-width: 0; } .s-facet__title { float: none; margin: 0 0 10px; padding: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--s-muted); } .s-facet__hint { margin: -6px 0 10px; font-size: 13px; color: var(--s-faint); } .s-facet__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .s-facet__option { position: relative; } .s-facet__option input { position: absolute; opacity: 0; pointer-events: none; } .s-facet__option label { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 6px 12px; border-radius: var(--s-radius-sm); color: var(--s-ink); font-size: 15px; cursor: pointer; } .s-facet__option label:hover { background: var(--s-band); } .s-facet__option--sub label { padding-left: 28px; font-size: 14px; } .s-facet__option input:checked + label { background: var(--s-accent-soft); color: var(--s-accent-soft-ink); font-weight: 700; } .s-facet__option input:focus-visible + label { outline: 3px solid var(--s-focus); outline-offset: 2px; } .s-facet__count { font-size: 13px; color: var(--s-faint); font-variant-numeric: tabular-nums; } /* Results bar, filters in use */ .s-catalog__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 16px; } .s-catalog__count { margin: 0; color: var(--s-muted); } .s-catalog__count strong { color: var(--s-ink); font-size: 18px; } .s-catalog__headline { margin-left: 4px; font-size: 14px; opacity: 0; transition: opacity .4s ease; } .s-catalog__tools { display: flex; align-items: center; gap: 10px; } .s-catalog__tools .form-select { min-height: 44px; border-radius: var(--s-radius-btn); padding-left: 16px; } .s-catalog__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--s-highlight); color: var(--s-on-highlight); font-size: 12px; font-weight: 700; } .s-btn--sm { min-height: 44px; padding: 0 16px; font-size: 15px; } .s-active-filters { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .s-site .s-active-filters__chip { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 8px 0 14px; border-radius: 999px; background: var(--s-accent-soft); color: var(--s-accent-soft-ink); font-size: 14px; font-weight: 600; text-decoration: none; } .s-site .s-active-filters__chip:hover { background: var(--s-accent); color: var(--s-on-accent); } .s-active-filters__chip .bi { font-size: 18px; } .s-site .s-active-filters__clear { margin-left: 4px; font-size: 14px; font-weight: 600; color: var(--s-muted); } /* The grid and its cards */ .s-catalog__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } @media (max-width: 1199.98px) { .s-catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575.98px) { .s-catalog__grid { grid-template-columns: minmax(0, 1fr); } } .s-catalog__sentinel { height: 1px; } .s-catalog__loading { display: none; padding: 24px 0; text-align: center; color: var(--s-accent); } .s-catalog__empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 56px 16px; border: 1px dashed var(--s-line); border-radius: var(--s-radius); text-align: center; color: var(--s-muted); } .s-catalog__empty .bi { font-size: 32px; color: var(--s-faint); } .s-catalog__empty p { margin: 0; } .s-catalog .pagination { margin-top: 32px; } .s-pcard { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--s-line); border-radius: var(--s-radius); background: var(--s-surface); transition: box-shadow .15s ease, opacity .25s ease, transform .25s ease; } .s-pcard:hover { box-shadow: var(--s-shadow); } .s-pcard__media { position: relative; aspect-ratio: 16 / 10; background: var(--s-tint-3); } .s-pcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .s-pcard__flag { position: absolute; top: 12px; left: 12px; } .s-pcard__body { flex-grow: 1; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; } .s-pcard__kicker { margin: 0; font-size: 13px; font-weight: 600; color: var(--s-accent); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .s-pcard__title { margin: 0; font-family: var(--s-font-display); font-weight: 600; font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; } .s-site .s-pcard__link { color: var(--s-ink); text-decoration: none; } .s-pcard__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } .s-pcard:hover .s-pcard__link { color: var(--s-accent); } .s-pcard__link:focus-visible { outline: none; } .s-pcard:has(.s-pcard__link:focus-visible) { outline: 3px solid var(--s-focus); outline-offset: 2px; } .s-pcard__status { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.4; } .s-pcard__status .bi { margin-top: 1px; } .s-pcard__status--hot { color: var(--s-ink); } .s-pcard__status--hot .bi { color: var(--s-accent); } .s-pcard__status--ok { color: var(--s-ink); } .s-pcard__status--ok .bi { color: var(--s-accent); } .s-pcard__status--muted { color: var(--s-muted); } .s-pcard__detail { display: block; color: var(--s-muted); } .s-pcard__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; color: var(--s-muted); } .s-pcard__facts li { display: inline-flex; align-items: center; gap: 6px; } .s-pcard__by { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--s-muted); } .s-pcard__by img { width: 28px; height: 28px; border-radius: 999px; object-fit: contain; border: 1px solid var(--s-line); background: var(--s-surface); } .s-pcard__rating { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 14px; } .s-pcard__rating .bi { color: var(--s-highlight); } .s-pcard__foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--s-line); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; } .s-pcard__price { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; } .s-pcard__price strong { font-size: 18px; color: var(--s-ink); } .s-pcard__price del { font-size: 14px; color: var(--s-faint); } .s-pcard__price-label, .s-pcard__then { font-size: 13px; color: var(--s-muted); } .s-pcard__actions { position: relative; z-index: 2; display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; } .s-pcard__actions .s-pill { font-size: 13px; padding: 4px 10px; } .s-icon-save { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--s-line); border-radius: 999px; background: var(--s-surface); color: var(--s-muted); font-size: 18px; cursor: pointer; } .s-icon-save:hover { color: var(--s-accent); border-color: var(--s-accent); } .s-icon-save[aria-pressed="true"] { color: var(--s-accent); } /* The recommender's "for you" mark (catalog-recommender.js places it on the image). */ .s-pcard .rec-badge { top: 12px !important; right: 12px !important; margin: 0 !important; padding: 5px 10px; border-radius: 999px; background: var(--s-surface); color: var(--s-accent); font-size: 12px; font-weight: 700; box-shadow: var(--s-shadow); } .s-pcard .rec-badge i { display: none; } /* ── Cart and checkout (shopping_cart.php, checkout.php) ──────────────────── */ .s-cart, .s-checkout { padding-top: 32px; padding-bottom: 72px; } .s-cart__head, .s-checkout__head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 28px; } .s-cart__head p { margin: 0; } .s-cart__layout, .s-checkout__layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; } .s-checkout__layout { grid-template-columns: minmax(0, 1fr) 420px; grid-template-areas: "main summary"; } .s-checkout__main { grid-area: main; display: flex; flex-direction: column; gap: 20px; min-width: 0; } .s-checkout__summary { grid-area: summary; } @media (max-width: 991.98px) { .s-cart__layout { grid-template-columns: minmax(0, 1fr); } /* On a phone what is being bought comes first, then how to pay for it. */ .s-checkout__layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "summary" "main"; gap: 24px; } } .s-cart__back { margin-top: 20px; } .s-cart__empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 64px 16px; border: 1px dashed var(--s-line); border-radius: var(--s-radius-lg); text-align: center; } .s-cart__empty > .bi { font-size: 44px; color: var(--s-accent); } .s-cart__empty p { margin: 0; max-width: 460px; } .s-cart__more { margin-top: 64px; display: flex; flex-direction: column; gap: 20px; } .s-cart__suggestion .s-btn { align-self: flex-start; } .s-site .s-cart__suggestion .s-card-link__title { color: var(--s-ink); text-decoration: none; } /* Order lines */ .s-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .s-line { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--s-line); } .s-line:first-child { padding-top: 0; } .s-line__thumb img { width: 120px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--s-radius-sm); background: var(--s-tint-3); display: block; } .s-line__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .s-line__body p { margin: 0; } .s-line__label { font-size: 13px; font-weight: 600; color: var(--s-accent); } .s-line__title { font-family: var(--s-font-display); font-weight: 600; font-size: 18px; line-height: 1.3; } .s-site .s-line__title a { color: var(--s-ink); text-decoration: none; } .s-site .s-line__title a:hover { color: var(--s-accent); } .s-line__notice, .s-line__gift { display: flex; gap: 6px; align-items: flex-start; font-size: 14px; color: var(--s-muted); } .s-line__notice .bi, .s-line__gift .bi { color: var(--s-accent); margin-top: 2px; } .s-line__facts { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; } .s-line__facts div { display: flex; flex-wrap: wrap; gap: 4px; } .s-line__facts dt { font-weight: 400; color: var(--s-muted); } .s-line__facts dt::after { content: ":"; } .s-line__facts dd { margin: 0; font-weight: 600; } .s-line__actions { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 4px; } .s-site .s-link-button--muted { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--s-muted); font-size: 14px; } .s-site .s-link-button--muted:hover { color: var(--s-ink); } .s-line__price { display: flex; flex-direction: column; align-items: flex-end; text-align: right; white-space: nowrap; } .s-line__price strong { font-size: 17px; } .s-line__price del { font-size: 14px; color: var(--s-faint); } @media (max-width: 575.98px) { .s-line { grid-template-columns: 88px minmax(0, 1fr); } .s-line__thumb img { width: 88px; } .s-line__price { grid-column: 2; flex-direction: row; gap: 8px; align-items: baseline; } } .s-line--compact { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; padding: 14px 0; } .s-line--compact .s-line__thumb img { width: 64px; } .s-line--compact .s-line__title { font-size: 15px; } .s-line--compact .s-line__facts, .s-line--compact .s-line__notice, .s-line--compact .s-line__gift { font-size: 13px; } .s-line--compact .s-line__price strong { font-size: 15px; } @media (max-width: 575.98px) { .s-line--compact .s-line__price { grid-column: auto; flex-direction: column; } } /* The summary box */ .s-summary { position: sticky; top: var(--s-sticky-top, 96px); display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid var(--s-line); border-radius: var(--s-radius-lg); background: var(--s-surface); box-shadow: var(--s-shadow); } @media (max-width: 991.98px) { .s-summary { position: static; } } .s-totals { margin: 0; display: flex; flex-direction: column; gap: 8px; } .s-totals div { display: flex; justify-content: space-between; gap: 12px; } .s-totals dt { font-weight: 400; color: var(--s-muted); } .s-totals dd { margin: 0; font-weight: 600; } .s-totals__saving dt, .s-totals__saving dd { color: var(--s-accent); } .s-totals__saving .bi { margin-right: 6px; } .s-totals__total { padding-top: 12px; border-top: 1px solid var(--s-line); } .s-totals__total dt { color: var(--s-ink); font-weight: 700; } .s-totals__total dd { font-family: var(--s-font-display); font-size: 26px; line-height: 1.1; } .s-totals__note { margin: -4px 0 0; display: flex; gap: 6px; align-items: center; font-size: 14px; color: var(--s-accent); } .s-coupon details summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; } .s-coupon details summary::-webkit-details-marker { display: none; } .s-coupon__form { display: flex; gap: 8px; margin-top: 8px; } .s-coupon__form .form-control { min-height: 44px; } .s-coupon__applied { margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--s-accent); font-weight: 600; } .s-coupon__applied .bi { margin-right: 6px; } .s-summary__secure { margin: -4px 0 0; display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 13px; color: var(--s-muted); } .s-site .s-summary__help { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--s-muted); text-decoration: none; } .s-site .s-summary__help:hover { color: var(--s-accent); } /* Checkout steps (not the home page's .s-step) */ .s-co-step { display: flex; flex-direction: column; gap: 18px; padding: 28px; border: 1px solid var(--s-line); border-radius: var(--s-radius-lg); background: var(--s-surface); } @media (max-width: 575.98px) { .s-co-step { padding: 22px 18px; } } .s-co-step--next { background: var(--s-band); border-color: transparent; opacity: .85; } .s-co-step__head { display: flex; gap: 14px; align-items: flex-start; } .s-co-step__head p { margin: 2px 0 0; } .s-co-step__n { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; background: var(--s-accent); color: var(--s-on-accent); font-weight: 700; } .s-co-step--next .s-co-step__n { background: var(--s-surface); color: var(--s-muted); border: 1px solid var(--s-line); } .s-co-step__count { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--s-muted); } .s-co-step__reassure { margin: 0; display: flex; gap: 8px; font-size: 13px; color: var(--s-muted); } .s-field > label { font-weight: 600; } .s-chosen { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--s-radius-sm); background: var(--s-bg); font-size: 15px; overflow-wrap: anywhere; } .s-chosen .bi { margin-right: 8px; color: var(--s-accent); } .s-social { display: flex; flex-direction: column; gap: 10px; } .s-site .s-social a { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; border: 1px solid var(--s-line); border-radius: var(--s-radius-btn); background: var(--s-surface); color: var(--s-ink); font-weight: 600; text-decoration: none; } .s-site .s-social a:hover { border-color: var(--s-ink); } .s-divider { margin: 0; display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--s-muted); } .s-divider::before, .s-divider::after { content: ""; flex: 1; height: 1px; background: var(--s-line); } .s-methods-preview { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .s-methods-preview li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--s-surface); font-size: 14px; } /* Payment methods: each a choice with what to know about it */ .s-methods { display: flex; flex-direction: column; gap: 10px; } .s-method { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; padding: 14px 16px; border: 1px solid var(--s-line); border-radius: var(--s-radius); cursor: pointer; } .s-method input { grid-row: span 2; margin-top: 4px; width: 18px; height: 18px; accent-color: var(--s-accent); } .s-method__name { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; } .s-method__hint { font-size: 13px; color: var(--s-muted); } .s-method:has(input:checked) { border-color: var(--s-accent); background: var(--s-accent-soft); box-shadow: 0 0 0 1px var(--s-accent); } .s-method:has(input:focus-visible) { outline: 3px solid var(--s-focus); outline-offset: 2px; } .s-pay [hidden] { display: none; } .s-pay__total { margin: 0 0 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 14px; border-top: 1px solid var(--s-line); } .s-pay__total span { font-weight: 700; } .s-pay__total strong { font-family: var(--s-font-display); font-size: 24px; line-height: 1.1; } @media (min-width: 992px) { .s-pay__total { display: none; } } .s-pay__note { margin: 10px 0 0; display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--s-muted); } .s-line__thumb img { height: auto; } .s-checkout__brand { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 28px; } .s-checkout__lock { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--s-muted); } .s-summary__items summary { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--s-radius-sm); background: var(--s-bg); font-weight: 600; cursor: pointer; list-style: none; } .s-summary__items summary::-webkit-details-marker { display: none; } .s-summary__items[open] summary .bi { transform: rotate(180deg); } .s-summary__items .s-lines { margin-top: 8px; } @media (min-width: 992px) { .s-summary__items summary { display: none; } .s-summary__items .s-lines { margin-top: 0; } } /* ── After paying (payment_success.php) ───────────────────────────────────── */ .s-receipt { max-width: 880px; padding-top: 48px; padding-bottom: 80px; display: flex; flex-direction: column; gap: 28px; } .s-receipt__head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } .s-receipt__head .s-lead { max-width: 620px; } .s-receipt__mark { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 999px; background: var(--s-accent); color: var(--s-on-accent); font-size: 40px; } .s-receipt__mark--pending { background: var(--s-tint-2); color: var(--s-ink); font-size: 34px; } .s-receipt__mail { margin: 0; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; font-size: 15px; color: var(--s-muted); overflow-wrap: anywhere; } .s-receipt__mail .bi { color: var(--s-accent); } .s-receipt__voucher p { margin: 0 0 12px; } .s-receipt__voucher > .bi { font-size: 24px; } .s-receipt__order { position: static; } .s-receipt__go { font-size: 14px; margin-top: 4px; } .s-receipt__ref { margin: 0; font-size: 13px; color: var(--s-muted); overflow-wrap: anywhere; } .s-receipt__ref span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .s-receipt__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 20px; } .s-summary .s-lines > .s-line:last-child { border-bottom: 0; padding-bottom: 8px; } /* ── Events: the agenda (events.php) and the event page (event_page.php) ──── */ .s-agenda { padding-top: 32px; padding-bottom: 72px; } .s-agenda .s-catalog__head p { margin: 0; } .s-agenda__month + .s-agenda__month { margin-top: 36px; } .s-site .s-agenda__label { margin: 0 0 12px; font-family: var(--s-font-body); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--s-muted); } .s-agenda__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .s-agenda__row { position: relative; display: grid; grid-template-columns: 76px 140px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 16px; border: 1px solid var(--s-line); border-radius: var(--s-radius); background: var(--s-surface); transition: box-shadow .15s ease; } .s-agenda__row:hover { box-shadow: var(--s-shadow); } .s-agenda__row:hover .s-pcard__link { color: var(--s-accent); } .s-agenda__row:has(.s-pcard__link:focus-visible) { outline: 3px solid var(--s-focus); outline-offset: 2px; } .s-agenda__date { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 4px; border-radius: var(--s-radius-sm); background: var(--s-accent-soft); color: var(--s-accent-soft-ink); line-height: 1.1; text-align: center; } .s-agenda__date span { font-size: 12px; font-weight: 700; letter-spacing: .06em; } .s-agenda__date span:last-child { font-size: 11px; font-weight: 600; letter-spacing: 0; } .s-agenda__date strong { font-family: var(--s-font-display); font-size: 30px; } .s-agenda__thumb { width: 140px; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: var(--s-radius-sm); background: var(--s-tint-3); } .s-agenda__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .s-agenda__body p { margin: 0; } .s-agenda__kicker { font-size: 13px; font-weight: 600; color: var(--s-accent); } .s-agenda__title { margin: 0; font-family: var(--s-font-display); font-weight: 600; font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; } .s-agenda__subtitle { font-size: 14px; color: var(--s-muted); } .s-agenda__side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; text-align: right; } .s-agenda__side .s-pcard__price { margin: 0; } .s-pill--muted { background: var(--s-band); color: var(--s-muted); } @media (max-width: 991.98px) { .s-agenda__row { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: start; } .s-agenda__thumb { display: none; } .s-agenda__side { grid-column: 2; flex-direction: row; justify-content: space-between; align-items: center; text-align: left; flex-wrap: wrap; } .s-agenda__date strong { font-size: 24px; } } .s-status--event { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 767.98px) { .s-status--event { grid-template-columns: minmax(0, 1fr); } .s-status--event .s-status__cell + .s-status__cell { border-left: 0; border-top: 1px solid var(--s-line); } } .s-timeline { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 2px solid var(--s-accent-soft); display: flex; flex-direction: column; gap: 22px; } .s-timeline li { position: relative; } .s-timeline li::before { content: ""; position: absolute; left: -29px; top: 4px; width: 12px; height: 12px; border-radius: 999px; background: var(--s-accent); box-shadow: 0 0 0 4px var(--s-surface); } .s-timeline p { margin: 0 0 4px; } .s-timeline__when { font-size: 13px; font-weight: 700; color: var(--s-accent); } .s-timeline__title { font-weight: 700; } .s-map { overflow: hidden; border-radius: var(--s-radius); border: 1px solid var(--s-line); aspect-ratio: 16 / 9; } .s-map iframe { width: 100%; height: 100%; border: 0; display: block; } .s-status--event .s-status__value { flex-wrap: nowrap; align-items: flex-start; } .s-status--event .s-status__value .bi { margin-top: 2px; } /* ── Sign-in pages (login, sign_up, forgot_password, reset_password, …) ───── */ .s-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); } .s-auth__main { display: flex; flex-direction: column; padding: 32px var(--s-gutter) 48px; } .s-auth__logo { align-self: flex-start; margin-bottom: 40px; } .s-auth__form { width: 100%; max-width: 440px; margin: auto; display: flex; flex-direction: column; gap: 18px; } .s-auth__form > p { margin: 0; } .s-auth__aside { display: flex; align-items: center; justify-content: center; padding: 48px; background: var(--s-accent); color: var(--s-on-accent); } .s-auth__eyebrow { margin: 0 0 18px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--s-on-accent-muted); } .s-auth__benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; max-width: 380px; font-family: var(--s-font-display); font-size: 22px; line-height: 1.3; } .s-auth__benefits li { display: flex; gap: 14px; align-items: flex-start; } .s-auth__benefits .bi { flex-shrink: 0; color: var(--s-highlight); } .s-auth__switch { text-align: center; color: var(--s-muted); } .s-auth__switch a { font-weight: 600; } .s-auth__legal { margin: 0; font-size: 13px; color: var(--s-muted); text-align: center; } @media (max-width: 991.98px) { .s-auth { grid-template-columns: minmax(0, 1fr); } .s-auth__aside { display: none; } .s-auth__logo { margin-bottom: 28px; } .s-auth__form { margin: 0 auto; } } .s-field__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .s-field__head label { font-weight: 600; } .s-check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; } .s-check input { width: 18px; height: 18px; accent-color: var(--s-accent); } .s-caps { display: inline-flex; align-items: center; gap: 6px; color: var(--s-ink); font-weight: 600; } .s-caps[hidden] { display: none; } .s-code { font-size: 22px; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; } .s-auth .g-recaptcha { align-self: center; } .was-validated .s-password:has(.form-control:invalid) ~ .invalid-feedback { display: block; } /* ── Blog (blog.php, blog_read_post.php) ──────────────────────────────────── */ .s-blog { padding-top: 32px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 28px; } .s-blog__head { display: flex; flex-direction: column; gap: 14px; } .s-blog__head .s-lead { max-width: 640px; } .s-blog__search { position: relative; max-width: 520px; } .s-blog__search .bi { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--s-muted); } .s-blog__search .form-control { padding-left: 44px; border-radius: var(--s-radius-btn); } .s-blog__cats { display: flex; flex-wrap: wrap; gap: 8px; } .s-site .s-blog__cats a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--s-line); border-radius: 999px; background: var(--s-surface); color: var(--s-ink); font-size: 14px; font-weight: 600; text-decoration: none; } .s-site .s-blog__cats a:hover { border-color: var(--s-accent); color: var(--s-accent); } .s-site .s-blog__cats a[aria-current="page"] { background: var(--s-accent); border-color: var(--s-accent); color: var(--s-on-accent); } .s-blog__results { margin: 0; color: var(--s-muted); } .s-blog__layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; } @media (max-width: 991.98px) { .s-blog__layout { grid-template-columns: minmax(0, 1fr); } } .s-blog__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .s-blog__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 991.98px) { .s-blog__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575.98px) { .s-blog__grid, .s-blog__grid--3 { grid-template-columns: minmax(0, 1fr); } } .s-blog__aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 24px; } @media (max-width: 991.98px) { .s-blog__aside { position: static; } } .s-site .s-blog__aside-title { margin: 0 0 12px; font-family: var(--s-font-body); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--s-muted); } .s-popular { margin: 0; padding: 0; list-style: none; counter-reset: pop; display: flex; flex-direction: column; } .s-popular li { counter-increment: pop; display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--s-line); } .s-popular li::before { content: counter(pop); font-family: var(--s-font-display); font-size: 22px; font-weight: 700; line-height: 1; color: var(--s-accent); min-width: 22px; } .s-site .s-popular a { color: var(--s-ink); font-weight: 600; text-decoration: none; line-height: 1.35; } .s-site .s-popular a:hover { color: var(--s-accent); } .s-blog__cta { padding: 20px; border-radius: var(--s-radius); background: var(--s-band); display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } .s-blog__cta p { margin: 0; font-weight: 600; } .s-post { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--s-line); border-radius: var(--s-radius); background: var(--s-surface); transition: box-shadow .15s ease; } .s-post:hover { box-shadow: var(--s-shadow); } .s-post:hover .s-pcard__link { color: var(--s-accent); } .s-post:has(.s-pcard__link:focus-visible) { outline: 3px solid var(--s-focus); outline-offset: 2px; } .s-post__media img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; display: block; background: var(--s-tint-3); } .s-post__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; flex-grow: 1; } .s-post__body p { margin: 0; } .s-post__kicker { font-size: 13px; font-weight: 600; color: var(--s-accent); } .s-post__title { margin: 0; font-family: var(--s-font-display); font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; } .s-post__excerpt { color: var(--s-muted); font-size: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .s-post__body .s-post__meta { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--s-muted); } .s-post__meta img { width: 28px; height: 28px; border-radius: 999px; object-fit: cover; } .s-post--wide { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } .s-post--wide .s-post__media img { height: 100%; aspect-ratio: auto; min-height: 300px; } .s-post--wide .s-post__body { justify-content: center; padding: 32px; gap: 14px; } .s-post--wide .s-post__title { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; } @media (max-width: 767.98px) { .s-post--wide { grid-template-columns: minmax(0, 1fr); } .s-post--wide .s-post__media img { min-height: 0; aspect-ratio: 16 / 9; } .s-post--wide .s-post__body { padding: 20px; } } .s-newsbox { padding: 22px; border-radius: var(--s-radius); background: var(--s-accent-soft); color: var(--s-accent-soft-ink); display: flex; flex-direction: column; gap: 10px; } .s-newsbox p { margin: 0; } .s-newsbox .s-form { gap: 10px; } .s-newsbox__result { font-size: 14px; font-weight: 600; } .s-newsbox__result--error { color: var(--s-ink); } .s-article { padding-top: 32px; padding-bottom: 56px; } .s-article__head, .s-article__body { max-width: 760px; margin: 0 auto; padding: 0 var(--s-gutter); box-sizing: content-box; } .s-article__head { display: flex; flex-direction: column; gap: 16px; } .s-article__title { font-size: calc(clamp(34px, 4.6vw, 58px) * var(--s-h1-scale)); line-height: 1.04; } .s-article__meta { display: flex; align-items: center; gap: 12px; } .s-article__meta img { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; } .s-article__meta p { margin: 0; } .s-site .s-article__author { color: var(--s-ink); font-weight: 700; text-decoration: none; } .s-article__cover { max-width: 1080px; margin: 32px auto; padding: 0 var(--s-gutter); } .s-article__cover img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--s-radius-lg); display: block; background: var(--s-tint-3); } .s-article__body { display: flex; flex-direction: column; gap: 28px; } .s-prose--article { font-size: 19px; line-height: 1.75; } .s-prose--article h2 { font-size: 28px; margin: 40px 0 12px; } .s-prose--article h3 { font-size: 22px; margin: 32px 0 10px; } .s-prose--article img { display: block; margin: 24px auto; } .s-prose--article blockquote { margin: 28px 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--s-accent); font-family: var(--s-font-display); font-size: 22px; color: var(--s-ink); } .s-article__cats { margin: 0; color: var(--s-muted); } .s-article__comments { padding-top: 12px; border-top: 1px solid var(--s-line); } .s-zoomable { cursor: zoom-in; } .s-zoom { background: transparent; border: 0; } .s-zoom img { width: 100%; height: auto; max-height: 88vh; object-fit: contain; } .s-zoom__close { position: absolute; top: -40px; right: 0; } /* ── Search and content pages (search_results, faq, contact_us, about_us, facilities, legal, page, 404) ── */ .s-search, .s-faqpage { padding-top: 32px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 28px; } .s-search__head { display: flex; flex-direction: column; gap: 16px; } .s-search__count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--s-band); color: var(--s-muted); font-size: 12px; } .s-blog__cats a[aria-current="page"] .s-search__count { background: rgba(255, 255, 255, .2); color: var(--s-on-accent); } .s-search__group { display: flex; flex-direction: column; gap: 16px; } .s-search__snippet { color: var(--s-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .s-faqpage__head { text-align: left; } .s-faqpage__list { max-width: 860px; } .s-faqpage__more { max-width: 860px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 22px; border-radius: var(--s-radius); background: var(--s-accent-soft); color: var(--s-accent-soft-ink); } .s-faqpage__more p { margin: 0; font-weight: 600; } .s-legal { padding-bottom: 72px; } .s-legal .s-article__body { margin-top: 24px; } .s-notfound { min-height: 60vh; padding-top: 72px; padding-bottom: 72px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; } .s-notfound__code { margin: 0; font-family: var(--s-font-display); font-size: clamp(88px, 16vw, 160px); font-weight: 700; line-height: 1; color: var(--s-accent-soft); letter-spacing: -0.04em; } .s-notfound .s-blog__search { width: 100%; } .s-notfound .s-btn-row { justify-content: center; } .s-about__intro { margin-top: 16px; } .s-pillar { display: flex; flex-direction: column; gap: 12px; } .s-pillar img { width: 56px; height: 56px; object-fit: contain; } .s-pillar p { margin: 0; color: var(--s-muted); } .s-teacher img { aspect-ratio: 1 / 1; } .s-photos { columns: 3 280px; column-gap: 16px; } .s-photos figure { margin: 0 0 16px; break-inside: avoid; position: relative; overflow: hidden; border-radius: var(--s-radius-sm); } .s-photos img { width: 100%; height: auto; display: block; } .s-photos figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 14px 12px; background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)); color: #fff; font-size: 14px; } .s-contact { padding-top: 32px; padding-bottom: 72px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: start; } @media (max-width: 991.98px) { .s-contact { grid-template-columns: minmax(0, 1fr); gap: 32px; } } .s-contact__form { display: flex; flex-direction: column; gap: 16px; } .s-contact__form .s-lead { margin: 0; } .s-contact__form .s-btn { align-self: flex-start; } .s-contact__ways { display: flex; flex-direction: column; gap: 12px; } .s-site .s-contact__way { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--s-line); border-radius: var(--s-radius); background: var(--s-surface); color: var(--s-ink); text-decoration: none; overflow-wrap: anywhere; } .s-contact__way > .bi { font-size: 22px; color: var(--s-accent); } .s-contact__way > span { display: flex; flex-direction: column; gap: 2px; } .s-contact__way strong { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--s-muted); } .s-site a.s-contact__way:hover { border-color: var(--s-accent); color: var(--s-ink); } .s-site .s-contact__way--primary { background: var(--s-accent); border-color: var(--s-accent); color: var(--s-on-accent); } .s-site .s-contact__way--primary:hover { background: var(--s-accent-hover); color: var(--s-on-accent); } .s-contact__way--primary > .bi, .s-contact__way--primary strong { color: var(--s-on-accent-muted); } .s-card-link img { height: auto; } /* ── Profiles and the gift claim (user_profile, partner_profile, gift_redeem) ── */ .s-profile { padding-top: 40px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 32px; } .s-profile__head { display: flex; gap: 28px; align-items: center; } .s-profile__avatar { width: 140px; height: 140px; flex-shrink: 0; border-radius: 999px; object-fit: cover; background: var(--s-tint-3); } .s-profile__who { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .s-profile__stats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; color: var(--s-muted); } .s-profile__stats strong { color: var(--s-ink); font-size: 18px; } .s-profile__section { display: flex; flex-direction: column; gap: 16px; } @media (max-width: 575.98px) { .s-profile__head { flex-direction: column; align-items: flex-start; } .s-profile__avatar { width: 112px; height: 112px; } } .s-awards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; } .s-awards li { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px; border-radius: var(--s-radius); background: var(--s-ink); color: var(--s-bg); text-align: center; font-size: 14px; } .s-awards img { width: 72px; height: 72px; } .s-partner { padding-bottom: 72px; } .s-partner__cover { height: 240px; overflow: hidden; background: var(--s-accent-soft); } .s-partner__cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .s-partner__cover--plain { height: 140px; } .s-partner__head { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 32px; } /* Only the mark overlaps the cover; the name sits below it, on the page. */ .s-partner__head > .s-partner__logo { margin-top: -56px; } .s-partner__head > div { padding-top: 16px; } .s-partner__head h1 { margin-bottom: 6px; } .s-partner__logo { width: 112px; height: 112px; flex-shrink: 0; border-radius: var(--s-radius); border: 4px solid var(--s-bg); background: var(--s-surface); object-fit: contain; box-shadow: var(--s-shadow); } .s-partner__logo--initial { display: inline-flex; align-items: center; justify-content: center; background: var(--s-accent); color: var(--s-on-accent); font-family: var(--s-font-display); font-size: 44px; font-weight: 700; } .s-partner__layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; } @media (max-width: 991.98px) { .s-partner__layout { grid-template-columns: minmax(0, 1fr); } .s-partner__head { flex-direction: column; gap: 8px; } .s-partner__head > div { padding-top: 0; } } .s-partner__main { display: flex; flex-direction: column; gap: 32px; } .s-partner__more { align-self: center; } .s-partner__more[hidden] { display: none; } .s-partner__about { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 12px; } .s-partner__about p { margin: 0; } @media (max-width: 991.98px) { .s-partner__about { position: static; } } .s-gift { padding-top: 40px; padding-bottom: 72px; } .s-gift__card { max-width: 820px; margin: 0 auto; overflow: hidden; border: 1px solid var(--s-line); border-radius: var(--s-radius-lg); background: var(--s-surface); box-shadow: var(--s-shadow); } .s-gift__image { width: 100%; aspect-ratio: 16 / 7; height: auto; object-fit: cover; display: block; background: var(--s-tint-3); } .s-gift__body { padding: 32px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; } @media (max-width: 575.98px) { .s-gift__body { padding: 22px 18px; } } .s-gift__body > p { margin: 0; } .s-gift__program { display: block; color: var(--s-accent); } .s-gift__message { margin: 0; padding: 14px 18px; border-left: 4px solid var(--s-highlight); background: var(--s-bg); border-radius: 0 var(--s-radius-sm) var(--s-radius-sm) 0; font-style: italic; } .s-gift__dates { margin: 0; padding: 0; border: 0; width: 100%; display: flex; flex-direction: column; gap: 10px; } .s-gift__dates legend { float: none; margin-bottom: 4px; } .s-gift__dates p { margin: 0; } .s-date--pick { position: relative; cursor: pointer; } .s-date--pick input { position: absolute; opacity: 0; pointer-events: none; } .s-date--pick:has(input:checked) { background: var(--s-accent); border-color: var(--s-accent); color: var(--s-on-accent); } .s-date--pick:has(input:focus-visible) { outline: 3px solid var(--s-focus); outline-offset: 2px; } .s-gift [data-ek-claim-error][hidden] { display: none; } /* ── TV (tv.php, tv_watch_video.php) ──────────────────────────────────────── */ .s-tv { padding-top: 32px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 28px; } .s-tv .s-blog__head { align-items: flex-start; } .s-tv__thumb { position: relative; display: block; } .s-tv__play { position: absolute; inset: 0; margin: auto; width: 60px; height: 60px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; transition: transform .15s ease; } .s-post:hover .s-tv__play { transform: scale(1.08); } .s-watch { background: var(--s-viewer-bg); color: var(--s-viewer-ink); padding: 24px 0 40px; } .s-watch__stage { display: flex; flex-direction: column; gap: 14px; max-width: 1100px; } .s-site .s-watch__back { color: var(--s-viewer-muted); } .s-site .s-watch__title { color: var(--s-viewer-ink); margin: 0; } .s-watch__player { border-radius: var(--s-radius); overflow: hidden; } .s-watch__text { margin: 0; color: var(--s-viewer-muted); max-width: 760px; } /* ── Gallery and contests (gallery, contests_home, contests, contest_page, contest_results) ── */ .s-gallery { padding-top: 32px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 24px; } .s-gallery__head { display: flex; flex-direction: column; gap: 14px; } .s-gallery__head .s-lead { margin: 0; } .s-gallery__cats { display: flex; flex-wrap: wrap; gap: 6px; } .s-site .s-gallery__cats a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--s-band); color: var(--s-muted); font-size: 13px; font-weight: 600; text-decoration: none; } .s-site .s-gallery__cats a[aria-current="page"] { background: var(--s-ink); color: var(--s-bg); } /* A photo grid runs nearly edge to edge: the photographs are the page. */ .s-gallery__grid { padding: 0 max(8px, calc(var(--s-gutter) / 2)); } .s-jg { min-height: 200px; } .s-jg__item img { border-radius: 6px; } .s-jg .jg-caption { display: flex; flex-direction: column; gap: 2px; padding: 28px 12px 10px; background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0)); font-size: 13px; } .s-site .s-jg .jg-caption a { color: #fff; text-decoration: none; } .s-jg__end { margin: 24px 0 0; text-align: center; color: var(--s-muted); } .s-jg__end[hidden] { display: none; } /* A contest's results: one column of whole photographs, prize by prize, like the feed. */ .s-results { max-width: 820px; padding-top: 32px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 48px; } .s-results__head h1 { margin: 12px 0 6px; } .s-results__head .s-blog__cats { margin-top: 20px; } .s-results__prize { display: flex; flex-direction: column; gap: 20px; scroll-margin-top: 96px; } .s-results__title { display: flex; align-items: center; gap: 14px; margin: 0; font-size: clamp(24px, 2.4vw, 32px); } /* The award marks are white, drawn to sit on a photo: here they sit on the accent. */ .s-results__title img { width: 60px; height: 60px; flex-shrink: 0; padding: 6px; border-radius: 999px; background: var(--s-accent); } .s-results__title .bi { color: var(--s-highlight); } .s-results__cards { display: flex; flex-direction: column; gap: 28px; } .s-results__more { justify-content: center; } .s-contestcard__state { display: inline-flex; align-items: center; gap: 6px; } .s-contestcard__state--closed, .s-contestcard__state--in_deliberation { color: var(--s-muted); } .s-contestcard__cta { align-self: flex-start; margin-top: 8px; } .s-contest-stats p { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; } .s-contest-stats .s-display { font-size: clamp(34px, 4vw, 52px); color: var(--s-on-accent); } .s-contest-stats span { color: var(--s-on-accent-muted); font-weight: 600; } .s-sponsors { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; } .s-sponsors img { max-height: 36px; width: auto; opacity: .8; } .s-prizes span { display: flex; flex-direction: column; } .s-prizes .bi { color: var(--s-highlight); } /* ── Photo page and feed (photo.php, feed.php) ────────────────────────────── */ .s-photo__stage { background: var(--s-viewer-bg); color: var(--s-viewer-ink); display: flex; flex-direction: column; } .s-photo__bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; } .s-photo__bar-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--s-viewer-muted); font-size: 15px; } .s-site .s-photo__icon { width: 40px; height: 40px; border-radius: 999px; border: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--s-viewer-chip); color: var(--s-viewer-ink); font-size: 18px; text-decoration: none; } .s-site .s-photo__icon:hover { background: var(--s-viewer-chip-hover); color: var(--s-viewer-ink); } .s-photo__icon[hidden] { display: none; } .s-photo__figure { position: relative; margin: 0; padding: 0 16px 24px; display: flex; justify-content: center; } .s-photo__figure > img:first-child { display: block; max-width: 100%; max-height: calc(100vh - 88px); width: auto; height: auto; object-fit: contain; } .s-photo__stage:fullscreen .s-photo__figure > img:first-child { max-height: calc(100vh - 64px); } .s-photo__badge { position: absolute; top: 12px; right: 28px; width: 72px; height: 72px; } .s-site .s-photo__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--s-viewer-control); border: 1px solid var(--s-viewer-chip-hover); color: var(--s-viewer-ink); font-size: 22px; text-decoration: none; } .s-site .s-photo__nav:hover { background: var(--s-viewer-control-hover); color: var(--s-viewer-ink); } .s-photo__nav--prev { left: 24px; } .s-photo__nav--next { right: 24px; } .s-photo__body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; padding-top: 32px; padding-bottom: 72px; } .s-photo__main { display: flex; flex-direction: column; gap: 20px; } .s-photo__main h1 { margin: 0; } .s-photo__main .s-h3 { margin-bottom: 10px; } .s-photo__author { display: flex; align-items: center; gap: 12px; } .s-photo__author > div { display: flex; flex-direction: column; margin-right: 8px; } .s-site .s-photo__author-name { color: var(--s-ink); font-weight: 600; text-decoration: none; } .s-photo__actions { display: flex; flex-wrap: wrap; gap: 8px; } .s-site .s-photo__stat { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--s-line); background: var(--s-surface); color: var(--s-ink); font-size: 15px; text-decoration: none; } .s-site button.s-photo__stat:hover, .s-site a.s-photo__stat:hover { border-color: var(--s-ink); } .s-photo__stat[aria-pressed="true"] .bi { color: var(--s-favorite); } .s-photo__note { margin: -8px 0 0; font-size: 14px; } .s-site .s-photo__contest { display: flex; align-items: center; gap: 16px; padding: 18px 22px; color: var(--s-ink); text-decoration: none; } .s-photo__contest > span { flex: 1; display: flex; flex-direction: column; } .s-photo__contest .bi-trophy { font-size: 24px; color: var(--s-accent); } .s-photo__text { margin: 0; white-space: normal; } .s-photo__signin { margin: 16px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .s-photo__signin > span { flex-basis: 100%; } .s-photo__side { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 24px; } .s-photo__side .s-panel { padding: 24px; } .s-photo__facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 16px; font-size: 15px; } .s-photo__facts dt { color: var(--s-muted); font-weight: 500; } .s-photo__facts dd { margin: 0; } .s-photo__exif { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; } .s-photo__exif li { display: flex; gap: 10px; align-items: baseline; } .s-photo__exif .bi { color: var(--s-muted); } .s-site .s-photo__subhead { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--s-muted); margin: 16px 0 8px; } .s-photo__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; } .s-site .s-photo__tags a { padding: 4px 12px; border-radius: 999px; background: var(--s-band); color: var(--s-ink); font-size: 14px; text-decoration: none; } .s-site .s-photo__tags a:hover { background: var(--s-line); } .s-photo__fans { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; } .s-photo__fans img { width: 32px; height: 32px; border-radius: 999px; object-fit: cover; display: block; } .s-photo__ads img { max-width: 100%; height: auto; } /* The comment thread's plugin, dressed in the site's type and colours. */ .s-photo__comments .jquery-comments { font-family: inherit; font-size: 15px; color: var(--s-ink); } .s-photo__comments .jquery-comments .textarea-wrapper .textarea { border-radius: var(--s-radius); border-color: var(--s-line); background: var(--s-surface); min-height: 44px; } .s-photo__comments .jquery-comments .highlight-background, .s-photo__comments .jquery-comments .send.enabled { background: var(--s-accent) !important; color: var(--s-on-accent); border-radius: 999px; } .s-photo__comments .jquery-comments .highlight-font, .s-photo__comments .jquery-comments .highlight-font-bold, .s-photo__comments .jquery-comments ul.navigation li.active { color: var(--s-accent) !important; } .s-photo__comments .jquery-comments ul.navigation li.active::after { background: var(--s-accent) !important; } .s-photo__comments .jquery-comments li.comment .name, .s-photo__comments .jquery-comments li.comment .profile-picture { cursor: pointer; } @media (max-width: 991.98px) { .s-photo__body { grid-template-columns: minmax(0, 1fr); } .s-photo__side { position: static; } } @media (max-width: 575.98px) { .s-photo__figure { padding: 0 0 16px; } .s-site .s-photo__nav { width: 40px; height: 40px; font-size: 18px; } .s-photo__nav--prev { left: 8px; } .s-photo__nav--next { right: 8px; } .s-photo__badge { right: 8px; width: 56px; height: 56px; } } .s-feed { padding-top: 32px; padding-bottom: 72px; max-width: 680px; } .s-feed__head { margin-bottom: 24px; } .s-feed__head h1 { margin: 0 0 6px; } .s-feed__head .s-blog__cats { margin-top: 16px; } .s-feed__head .bi { margin-right: 4px; } .s-feed__list { display: flex; flex-direction: column; gap: 24px; } .s-feed__card { border: 1px solid var(--s-line); border-radius: var(--s-radius-lg); background: var(--s-surface); overflow: hidden; } .s-feed__who { display: flex; align-items: center; gap: 12px; padding: 12px 16px; } .s-feed__who > div { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; } .s-site .s-feed__author { color: var(--s-ink); font-weight: 600; font-size: 15px; text-decoration: none; } /* Whole and full width, as the templates showed them: never letterboxed. */ .s-feed__image img { display: block; width: 100%; height: auto; background: var(--s-band); } .s-feed__foot { display: flex; align-items: center; gap: 12px; padding: 12px 16px; } .s-site .s-feed__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--s-ink); text-decoration: none; } /* ── Upload and My gallery (upload.php, my_gallery.php) ───────────────────── */ .s-upload { padding-top: 32px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 20px; max-width: 1040px; } .s-upload__head h1 { margin: 0 0 12px; } .s-upload__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; counter-reset: step; } .s-upload__steps li { counter-increment: step; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--s-band); color: var(--s-muted); font-size: 14px; font-weight: 600; } .s-upload__steps li::before { content: counter(step); width: 24px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--s-surface); font-size: 13px; } .s-upload__steps li[aria-current] { background: var(--s-accent); color: var(--s-on-accent); } .s-upload__steps li[aria-current]::before { color: var(--s-accent); } .s-site .s-upload__contest { display: flex; align-items: center; gap: 16px; padding: 18px 22px; text-decoration: none; } .s-upload__contest .bi { font-size: 26px; } .s-upload__contest > span { display: flex; flex-direction: column; } .s-upload__quota { margin: 0; } .s-upload__drop { border: 2px dashed var(--s-line); border-radius: var(--s-radius-lg); background: var(--s-surface); padding: 56px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; transition: border-color .15s ease, background .15s ease; } .s-upload__drop > .bi { font-size: 48px; color: var(--s-accent); } .s-upload__drop h2, .s-upload__drop p { margin: 0; } .s-upload__drop[hidden], .s-upload__cards[hidden], .s-upload__progress[hidden], .s-upload__all-done[hidden] { display: none; } body.dz-drag-hover .s-upload__drop { border-color: var(--s-accent); background: var(--s-accent-soft); } .s-upload__formats { font-size: 13px; color: var(--s-faint); } .s-upload__cards { display: flex; flex-direction: column; gap: 16px; } .s-upload__cards-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .s-upload__cards-head h2, .s-upload__cards-head p { margin: 0; } .s-upload__progress { display: flex; flex-direction: column; gap: 6px; min-width: 180px; font-size: 14px; } .s-upload__bar { display: block; height: 6px; border-radius: 999px; background: var(--s-band); overflow: hidden; } .s-upload__bar > span { display: block; height: 100%; width: 0; background: var(--s-accent); transition: width .15s ease; } .s-upload__list { display: flex; flex-direction: column; gap: 16px; } .s-upcard { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; padding: 16px; border: 1px solid var(--s-line); border-radius: var(--s-radius); background: var(--s-surface); } .s-upcard.is-published { border-color: var(--s-accent); } .s-upcard__thumb { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--s-radius-sm); background: var(--s-band); } .s-upcard__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; align-content: start; } .s-upcard__form[hidden] { display: none; } .s-upcard__form .s-field--wide, .s-upcard__status, .s-upcard__error, .s-upcard__actions { grid-column: 1 / -1; } .s-upcard__status { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 14px; } .s-upcard__badge { padding: 3px 10px; border-radius: 999px; background: var(--s-tint-2); color: var(--s-ink); font-size: 13px; font-weight: 600; } .s-upcard.is-published .s-upcard__badge { background: var(--s-accent-soft); color: var(--s-accent-soft-ink); } .s-upcard__error { margin: 0; color: var(--s-ink); background: var(--s-tint-2); padding: 8px 12px; border-radius: var(--s-radius-sm); font-size: 14px; } .s-upcard__error[hidden] { display: none; } .s-upcard__actions { display: flex; flex-wrap: wrap; gap: 8px; } .s-upcard__done { margin: 0; align-self: center; display: flex; gap: 10px; align-items: center; font-weight: 600; } .s-upcard__done[hidden] { display: none; } .s-upcard__done .bi { color: var(--s-accent); font-size: 22px; } .s-site .s-upload__all-done { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 18px 22px; } @media (max-width: 767.98px) { .s-upcard { grid-template-columns: minmax(0, 1fr); } .s-upcard__thumb { aspect-ratio: 3 / 2; } .s-upcard__form { grid-template-columns: minmax(0, 1fr); } } .s-mygallery { padding-top: 32px; padding-bottom: 72px; } .s-mygallery__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; } .s-mygallery__head h1 { margin: 0 0 6px; } .s-mygallery__head .s-lead { margin: 0; } .s-mygallery__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .s-mygallery__item { border: 1px solid var(--s-line); border-radius: var(--s-radius); background: var(--s-surface); overflow: hidden; } .s-mygallery__image img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; height: auto; transition: transform .2s ease; } .s-mygallery__image:hover img { transform: scale(1.03); } .s-mygallery__image { display: block; overflow: hidden; } .s-mygallery__bar { display: flex; align-items: center; gap: 4px; padding: 8px 8px 8px 14px; } .s-mygallery__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 15px; } .s-site .s-mygallery__action { width: 36px; height: 36px; border-radius: 999px; border: 0; background: transparent; color: var(--s-muted); display: inline-flex; align-items: center; justify-content: center; } .s-site .s-mygallery__action:hover { background: var(--s-band); color: var(--s-ink); } .s-mygallery__panel { --bs-offcanvas-width: 480px; background: var(--s-bg); } .s-mygallery__form { display: flex; flex-direction: column; gap: 14px; } .s-mygallery__replace { border: 2px dashed var(--s-line); border-radius: var(--s-radius); padding: 12px; text-align: center; cursor: pointer; background: var(--s-surface); } .s-mygallery__replace.dz-drag-hover { border-color: var(--s-accent); background: var(--s-accent-soft); } .s-mygallery__replace img { display: block; max-width: 100%; max-height: 220px; margin: 0 auto 8px; border-radius: var(--s-radius-sm); } .s-mygallery__replace p { margin: 0; font-size: 14px; } .s-mygallery__exif { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; border: 0; } .s-mygallery__exif legend { grid-column: 1 / -1; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--s-muted); margin-bottom: 0; } .s-mygallery__actions { display: flex; justify-content: space-between; gap: 8px; position: sticky; bottom: -16px; padding: 12px 0; background: var(--s-bg); } @media (max-width: 991.98px) { .s-mygallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 575.98px) { .s-mygallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .s-mygallery__panel { --bs-offcanvas-width: 100%; } } /* Contest page: the awards, each image at its own proportions beside what it stands for. */ .s-awards-panel > .s-muted { margin: -10px 0 24px; } .s-awards-panel__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: center; } .s-awards-panel__row + .s-awards-panel__row { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--s-line); } .s-awards-panel__row--solo { grid-template-columns: minmax(0, 1fr); } .s-awards-panel__img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: contain; border-radius: var(--s-radius); } .s-site .s-awards-panel__title { font-size: 18px; margin: 0 0 14px; } .s-awards-panel__list { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 14px; } .s-awards-panel__list li { display: flex; gap: 12px; align-items: flex-start; } .s-awards-panel__list .bi { color: var(--s-highlight); font-size: 20px; } .s-awards-panel__list span { display: flex; flex-direction: column; color: var(--s-muted); font-size: 15px; } .s-awards-panel__list strong { color: var(--s-ink); font-family: var(--s-font-display); font-size: 24px; line-height: 1.2; } @media (max-width: 767.98px) { .s-awards-panel__row { grid-template-columns: minmax(0, 1fr); gap: 20px; } } /* The photo viewer (_photo_viewer.php): photo.php's own markup, full screen over the listing. */ .s-viewer .modal-content { background: var(--s-bg); border: 0; border-radius: 0; } .s-viewer__loading { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--s-viewer-bg); color: var(--s-viewer-ink); } /* Contests home: the public gallery's listings, one card each. */ .s-site a.s-explore { display: flex; flex-direction: column; gap: 10px; color: var(--s-ink); text-decoration: none; transition: border-color .15s ease, transform .15s ease; } .s-site a.s-explore:hover { border-color: var(--s-ink); transform: translateY(-2px); } .s-explore__icon { width: 48px; height: 48px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--s-accent-soft); color: var(--s-accent); font-size: 22px; } .s-explore__title { margin: 6px 0 0; } .s-explore__text { color: var(--s-muted); flex: 1; } .s-explore__go { margin-top: 6px; } /* Contests home: the hall of fame, a compact band of the latest podium photos. */ .s-fame { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } .s-site .s-fame__item { position: relative; display: block; overflow: hidden; border-radius: var(--s-radius-sm); color: var(--s-viewer-ink); text-decoration: none; background: var(--s-tint-3); } .s-fame__item img { display: block; width: 100%; height: 220px; object-fit: cover; transition: transform .25s ease; } .s-fame__item:hover img { transform: scale(1.04); } .s-fame__caption { position: absolute; inset: auto 0 0 0; display: flex; gap: 8px; align-items: flex-start; padding: 28px 12px 10px; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); font-size: 13px; line-height: 1.3; } .s-fame__caption .bi { color: var(--s-highlight); font-size: 16px; } .s-fame__caption > span { display: flex; flex-direction: column; min-width: 0; } .s-fame__caption strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 991.98px) { .s-fame { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 575.98px) { .s-fame { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .s-fame__item img { height: 170px; } } /* ── The jury (jury_contests.php, jury_deliberation.php) ─────────────────── */ .s-jury { padding-top: 32px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 24px; } .s-jury__head h1 { margin: 12px 0 6px; } .s-jury__head .s-lead { margin: 0; } .s-jury__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; max-width: 880px; } .s-jury__assignment { display: flex; align-items: center; gap: 20px; padding: 16px 20px; } .s-jury__assignment > img { width: 96px; height: 96px; flex-shrink: 0; object-fit: cover; border-radius: var(--s-radius-sm); background: var(--s-tint-3); } .s-jury__assignment-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .s-jury__assignment-body h2 { margin: 0; } .s-jury__meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; color: var(--s-muted); } .s-jury__status { padding: 3px 10px; border-radius: 999px; background: var(--s-band); color: var(--s-ink); font-weight: 600; font-size: 13px; } .s-jury__status.is-open { background: var(--s-accent-soft); color: var(--s-accent-soft-ink); } /* A native , drawn in the site's colours. */ .s-jury__bar { display: block; width: 100%; max-width: 320px; height: 6px; border: 0; border-radius: 999px; background: var(--s-band); overflow: hidden; appearance: none; } .s-jury__bar::-webkit-progress-bar { background: var(--s-band); border-radius: 999px; } .s-jury__bar::-webkit-progress-value { background: var(--s-accent); border-radius: 999px; } .s-jury__bar::-moz-progress-bar { background: var(--s-accent); border-radius: 999px; } .s-jury__progress { padding: 20px 24px; display: flex; flex-direction: column; gap: 10px; } .s-jury__progress .s-jury__bar { max-width: none; height: 8px; } .s-jury__progress-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; } .s-jury__pct { margin: 0; font-size: 14px; } .s-jury__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .s-jury__hint { margin: 0; font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; } .s-jury__hint kbd { display: inline-block; min-width: 24px; padding: 1px 6px; border: 1px solid var(--s-line); border-bottom-width: 2px; border-radius: 6px; background: var(--s-surface); color: var(--s-ink); font-family: inherit; font-size: 12px; font-weight: 600; text-align: center; box-shadow: none; } .s-site .s-blog__cats button { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--s-line); border-radius: 999px; background: var(--s-surface); color: var(--s-ink); font-size: 14px; font-weight: 600; } .s-site .s-blog__cats button:hover { border-color: var(--s-accent); color: var(--s-accent); } .s-site .s-blog__cats button[aria-pressed="true"] { background: var(--s-accent); border-color: var(--s-accent); color: var(--s-on-accent); } .s-jury__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; } .s-jury__card { border: 1px solid var(--s-line); border-radius: var(--s-radius); background: var(--s-surface); overflow: hidden; } .s-jury__card[hidden] { display: none; } .s-jury__card[data-state="done"] { border-color: var(--s-accent); } /* The whole frame, never cropped: a juror judges the composition as it was submitted. */ .s-site .s-jury__image { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--s-viewer-bg); cursor: zoom-in; } .s-jury__image img { display: block; width: 100%; height: 280px; object-fit: contain; } .s-jury__blind { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 12px 8px; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); color: var(--s-viewer-muted); font-size: 12px; text-align: left; } .s-jury__badge { position: absolute; top: 10px; right: 10px; padding: 4px 10px; border-radius: 999px; background: var(--s-accent); color: var(--s-on-accent); font-weight: 700; font-size: 14px; } .s-jury__badge:empty { display: none; } .s-jury__card[data-state="partial"] .s-jury__badge { background: var(--s-highlight); color: var(--s-on-highlight); } .s-jury__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; } .s-site .s-jury__title { margin: 0; font-size: 16px; font-family: var(--s-font-body); font-weight: 600; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s-jury__criterion { display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--s-line); } .s-jury__label { margin: 0; font-size: 14px; font-weight: 600; } .s-jury__notes[hidden] { display: none; } .s-site .s-jury__notes { min-height: 0; font-size: 14px; } .s-jury__status-line { margin: 0; font-size: 13px; color: var(--s-muted); } .s-scale { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; } .s-site .s-scale__btn { min-width: 0; height: 36px; padding: 0; border: 1px solid var(--s-line); border-radius: 8px; background: var(--s-surface); color: var(--s-ink); font-weight: 600; font-size: 14px; } .s-site .s-scale__btn:hover:not(:disabled) { border-color: var(--s-accent); color: var(--s-accent); } .s-site .s-scale__btn[aria-pressed="true"] { background: var(--s-accent); border-color: var(--s-accent); color: var(--s-on-accent); } .s-scale__btn:disabled { opacity: .5; cursor: not-allowed; } html.s-noscroll { overflow: hidden; } .s-jury-viewer { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; background: var(--s-viewer-bg); color: var(--s-viewer-ink); } .s-jury-viewer[hidden] { display: none; } .s-jury-viewer__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; } .s-jury-viewer__caption { color: var(--s-viewer-muted); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s-jury-viewer__figure { position: relative; flex: 1; min-height: 0; margin: 0; display: flex; align-items: center; justify-content: center; padding: 0 16px; cursor: zoom-out; } /* Never beyond the size stored (photo_display_max_width(), PhotoUploadService::FULL_WIDTH): an enlargement blurs the photo and a juror cannot tell that blur from the photographer's. */ .s-jury-viewer__figure img { max-width: min(1200px, 100%); max-height: 100%; object-fit: contain; cursor: default; } .s-jury-viewer__score { padding: 12px 16px 20px; display: flex; justify-content: center; } .s-jury-viewer__score .s-scale { width: min(520px, 100%); } .s-jury-viewer .s-scale__btn { background: var(--s-viewer-chip); border-color: var(--s-viewer-chip-hover); color: var(--s-viewer-ink); } @media (max-width: 991.98px) { .s-jury__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575.98px) { .s-jury__grid { grid-template-columns: minmax(0, 1fr); } .s-jury__assignment { flex-wrap: wrap; } .s-scale { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .s-jury__closed { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; } @media (max-width: 767.98px) { .s-jury__hint { display: none; } } /* ── The administrator's second step (two_factor, two_factor_setup, two_factor_recovery) ── */ .s-auth--solo { grid-template-columns: minmax(0, 1fr); } .s-mfa-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 14px; } .s-mfa-steps li { padding-left: 4px; } .s-mfa-steps li::marker { font-weight: 700; color: var(--s-accent); } /* The QR code stays sharp: its modules must not be smoothed into grey. */ .s-mfa-qr { display: block; margin: 14px auto; width: 200px; height: 200px; padding: 10px; border: 1px solid var(--s-line); border-radius: var(--s-radius-sm); background: var(--s-qr-bg); image-rendering: pixelated; } .s-mfa-key { user-select: all; padding: 2px 6px; border-radius: 6px; background: var(--s-band); color: var(--s-ink); font-size: 14px; word-break: break-all; } .s-mfa-codes { margin: 0; padding: 18px; border: 1px dashed var(--s-line); border-radius: var(--s-radius-sm); background: var(--s-surface); color: var(--s-ink); font-size: 18px; line-height: 1.8; text-align: center; letter-spacing: .08em; font-variant-numeric: tabular-nums; } .s-mfa-actions .s-btn { flex: 1; } .s-preview__player { background: var(--s-viewer-bg); } .s-preview__player video { object-fit: contain; background: var(--s-viewer-bg); } .s-preview__message { margin: 0; padding: 48px 24px; display: flex; justify-content: center; text-align: center; } /* ── The notification bell (navbar.php, _notifications.php) ───────────────── */ .s-notif .s-icon-btn { position: relative; } .s-site .s-notif__menu { width: min(380px, calc(100vw - 24px)); padding: 0; overflow: hidden; } .s-notif__scroll { max-height: min(460px, 70vh); overflow-y: auto; overscroll-behavior: contain; padding: 8px; } .s-notif__loading { display: flex; justify-content: center; padding: 24px; color: var(--s-muted); } .s-notif__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 10px; } .s-notif__title { margin: 0; font-weight: 700; font-size: 16px; color: var(--s-ink); } .s-site .s-notif__all { padding: 0; font-size: 14px; } .s-notif__empty { margin: 0; padding: 28px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--s-muted); font-size: 14px; text-align: center; } .s-notif__empty .bi { font-size: 26px; } .s-notif__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .s-site .s-notif__item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 8px; border-radius: var(--s-radius-sm); color: var(--s-ink); text-decoration: none; } .s-site .s-notif__item:hover { background: var(--s-band); color: var(--s-ink); } .s-notif__item.is-unread { background: var(--s-accent-soft); } .s-site .s-notif__item.is-unread:hover { background: var(--s-tint-1); } .s-notif__icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--s-band); color: var(--s-muted); font-size: 17px; } .s-notif__item.is-unread .s-notif__icon { background: var(--s-accent); color: var(--s-on-accent); } .s-notif__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.35; } .s-notif__text strong { font-weight: 600; } .s-notif__item:not(.is-unread) .s-notif__text strong { font-weight: 500; } .s-notif__body { color: var(--s-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .s-notif__when { color: var(--s-faint); font-size: 12px; } .s-notif__dot { flex-shrink: 0; align-self: center; width: 8px; height: 8px; border-radius: 999px; background: var(--s-accent); } .s-contestcard__links { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 8px; } /* Above the title's stretched link (.s-pcard__link::after), which covers the whole card. */ .s-contestcard__links a { position: relative; z-index: 2; } /* ── The closing band: a dark, lit invitation that ends a school's home and a showcase programme page (blocks/closing_band.php, program_page.php) ─────────────── */ .s-closing--band { --s-accent-paint: var(--s-accent-paint-on-deep); } .s-closing--band { background: var(--s-deep); color: var(--s-on-deep); text-align: left; position: relative; overflow: hidden; margin: 120px var(--s-gutter) 0; padding: 96px 0 !important; border-radius: 36px; } .s-closing--band .s-container { flex-direction: row; justify-content: space-between; align-items: center; gap: 48px; position: relative; padding: 0 56px; } .s-closing--band .s-closing__copy { align-items: flex-start; gap: 14px; max-width: 760px; } .s-site .s-closing--band h2 { color: var(--s-on-deep); font-size: clamp(34px, 4.4vw, 64px); line-height: 1; letter-spacing: -0.045em; font-weight: 800; } .s-closing--band .s-lead { color: var(--s-on-deep-muted); } .s-closing--band .s-btn-row { flex-shrink: 0; justify-content: flex-start; flex-direction: column; align-items: stretch; } .s-closing__light { position: absolute; border-radius: 50%; pointer-events: none; } .s-closing__light--1 { width: 800px; height: 800px; right: -160px; top: -300px; background: radial-gradient(circle, var(--s-accent-2), transparent 62%); filter: blur(30px); animation: s-drift-1 14s ease-in-out infinite alternate; } .s-closing__light--2 { width: 600px; height: 600px; left: -120px; bottom: -360px; background: radial-gradient(circle, var(--s-highlight), transparent 60%); filter: blur(40px); opacity: .7; animation: s-drift-2 18s ease-in-out infinite alternate; } @media (max-width: 991.98px) { .s-closing--band .s-container { flex-direction: column; align-items: flex-start; gap: 24px; } } @media (max-width: 767.98px) { .s-closing--band { padding: 44px 0 !important; border-radius: 28px; margin-top: 56px; } .s-closing--band .s-container { padding: 0 24px; } } @keyframes s-drift-1 { to { transform: translate(120px, -80px) scale(1.15); } } @keyframes s-drift-2 { to { transform: translate(-140px, -60px) scale(.9); } } @media (prefers-reduced-motion: reduce) { .s-closing__light { animation: none !important; } } /* ── Motion: appearing as the page scrolls (edukall-site-motion.js adds .ek-motion) ── [data-reveal] always rises; [data-reveal="skin"] only where the skin's own layer says so. */ .ek-motion [data-reveal]:not([data-reveal="skin"]) { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); } .ek-motion [data-reveal].is-in { opacity: 1; transform: none; } /* Siblings that arrive together follow one another by a beat. */ .ek-motion [data-reveal]:nth-child(2) { transition-delay: 70ms; } .ek-motion [data-reveal]:nth-child(3) { transition-delay: 140ms; } .ek-motion [data-reveal]:nth-child(4) { transition-delay: 210ms; } .ek-motion [data-reveal]:nth-child(n+5) { transition-delay: 280ms; } @media (prefers-reduced-motion: reduce) { .ek-motion [data-reveal] { opacity: 1; transform: none; transition: none; } .s-phero__image, .s-live::before, .s-utility__notice::before, .s-phero__play-icon::after { animation: none !important; } } /* A phone pays for every blurred or endlessly moving layer on each frame of a scroll: there the photos stand still, the lights keep their soft gradient without a blur filter, and glass is a plain tint. What moves on purpose (the student work rows) keeps moving. */ @media (max-width: 767.98px) { .s-phero__image, .s-closing__light { animation: none; } .s-closing__light { filter: none; } .s-site .s-btn--glass { -webkit-backdrop-filter: none; backdrop-filter: none; } body.s-site { --s-buybar-blur: none; --s-buybar-bg: color-mix(in srgb, var(--s-surface) 97%, transparent); } } /* iOS zooms the page into any field whose text is under 16px when it takes the focus, and does not zoom back out. On a touch screen every field of the site — forms, the coupon, the jury's notes, the advisor and the search — sets its text at 16px at least; a larger one keeps its size. Important, because several fields set a smaller size on purpose for a mouse. */ @media (hover: none) and (pointer: coarse) { body.s-site :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="submit"], [type="button"]), select, textarea) { font-size: max(16px, 1em) !important; } }