, which is * where the header slot renders — page content lives inside

, so * nothing mid-page can match. * * The parent is .cf-site, NOT : measured on the live site, the real * chain is body > .cf-site > .custom-component-wrapper > .component- * >

. An earlier "body >" version of this rule matched zero * elements on every real page while passing a hand-built test fixture. * * Deliberately NOT :first-of-type. Two measured reasons: * - it matches the first

among ANY element's children, so a * custom component nested mid-page pinned itself over the content; * - CustomComponentBlock renders a placeholder

as a SIBLING * before the wrapper until the component is ready, which makes the * wrapper the second

and silently drops the rule during load. * The :has(~ main) form depends on neither sibling order nor child index. * * The :not(:has(~ .custom-component-wrapper ~ main)) form narrows that to the * LAST wrapper before

. A site can stack several header components * (pailan-college runs a topbar above its nav); pinning all of them puts * two bars at top:0 on top of each other. Sticking only the last means * the topbar scrolls away and the navigation pins — the conventional * behaviour for that pattern. */ .cf-site > .custom-component-wrapper:has(~ main):not(:has(~ .custom-component-wrapper ~ main)) { position: sticky; top: 0; /* Above page content and the nav panel's backdrop, below modals. */ z-index: var(--cf-header-z, 50); /* A sticky header must be opaque, or page content scrolls visibly * through it. Painted on the WRAPPER rather than on the header, so a * header that sets its own background — or a deliberately translucent * one — still wins by simply painting on top of this. */ background-color: var(--cf-bg, #ffffff); } /* Fixed-ratio media boxes. Pair with directly, or * put the class on a wrapper whose child image fills it. */ .cf-media-square, .cf-media-4-3, .cf-media-16-9, .cf-media-3-4, .cf-media-21-9 { width: 100%; display: block; object-fit: cover; overflow: hidden; /* §6: images/media md–lg. */ border-radius: var(--cf-img-radius, 10px); } [data-cf-media-frame="true"] { display:block; width:100%; overflow:hidden; } .cf-media-square { aspect-ratio: 1 / 1; } .cf-media-4-3 { aspect-ratio: 4 / 3; } .cf-media-16-9 { aspect-ratio: 16 / 9; } /* Portrait and Wide, added alongside the original three so the Media panel's Ratio control has a real class for every option it offers. */ .cf-media-3-4 { aspect-ratio: 3 / 4; } .cf-media-21-9 { aspect-ratio: 21 / 9; } .cf-media-square > img, .cf-media-4-3 > img, .cf-media-16-9 > img, .cf-media-3-4 > img, .cf-media-21-9 > img { width: 100%; height: 100%; object-fit: cover; display: block; } .cf-media-square > [data-cf-media-content] > img, .cf-media-4-3 > [data-cf-media-content] > img, .cf-media-16-9 > [data-cf-media-content] > img, .cf-media-3-4 > [data-cf-media-content] > img, .cf-media-21-9 > [data-cf-media-content] > img, .cf-media-square > video, .cf-media-4-3 > video, .cf-media-16-9 > video, .cf-media-3-4 > video, .cf-media-21-9 > video { width:100%; height:100%; object-fit:cover; display:block; } /* Inside a ratio frame the FRAME decides the size. The wrapped image usually * carries its own sizing — a GrapesJS #id rule or an inline height/max-height * (every logo has one) — which outranks the class rules above, so picking * Square changed the box but left the image a thin strip at its top. Hence * !important. The content layer is pinned to the frame with absolute * positioning rather than height:100%: a height that comes only from * aspect-ratio is not always one a child's percentage can resolve against, * and the image then fell back to its natural height. object-fit stays * overridable so the Fit control still works. */ [data-cf-media-frame="true"] { position: relative; } [data-cf-media-frame="true"] > [data-cf-media-content] { position: absolute !important; inset: 0 !important; display: block !important; width: auto !important; height: auto !important; margin: 0 !important; } /* A frame nested inside another (left behind by older ratio picks) defers * to the OUTERMOST one, which holds the ratio the user picked last. */ [data-cf-media-frame="true"] [data-cf-media-frame="true"] { position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; aspect-ratio: auto !important; margin: 0 !important; border-radius: 0 !important; } [data-cf-media-frame="true"] > [data-cf-media-content] > img, [data-cf-media-frame="true"] > img, [data-cf-media-frame="true"] > video { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; display: block; } /* ───────────────────────────────────────────────────────────────────── EXTENDED LAYOUT VOCABULARY Added because 32 of the 40 most recent library templates used NO cf-* layout helper at all: each invented a private system (vel-*, fin-*, fl-*) with its own shell and its own grid. Two things broke every time. A private shell hardcodes a max-width, so the tenant's --cf-container-max-width and the responsive guards are bypassed. And a private class only works while its own customCss travels with it — the moment a rule is missing, the element is unstyled and the grid collapses into a stack. That is the "preview looks right, the database does not" report. A template invents a class when the shared set cannot say what it means. So the set has to be able to say it. These are the shapes measured on the reference sites that nothing here could express. ───────────────────────────────────────────────────────────────────── */ /* Wider equal grids. Logo walls and icon rows measured at 5 and 6 across; with only 1-4 available, a template had to write its own. */ .cf-grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--cf-row-gap, 24px) var(--cf-column-gap, 24px); } .cf-grid-6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--cf-row-gap, 24px) var(--cf-column-gap, 24px); } /* The remaining uneven splits. 30/70 and 40/60 existed, so a 1:3 sidebar or a 2:1 editorial column had nowhere to land and became a custom grid. Named by ratio, like the ones already here, so the set reads as one family rather than two generations of it. */ .cf-split-25-75, .cf-split-33-67, .cf-split-67-33, .cf-split-75-25 { display: grid; gap: var(--cf-row-gap, 24px) var(--cf-column-gap, 24px); align-items: start; } .cf-split-25-75 { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); } .cf-split-33-67 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .cf-split-67-33 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .cf-split-75-25 { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); } /* A horizontal rail: card carousels, logo strips, step tracks. Three of the reference sites use one. Without it a template reached for its own overflow container and lost the scroll-snap and the hidden scrollbar every time. Deliberately scroll-snap rather than JS: it needs no runtime, it keeps working if the script fails, and it degrades to a plain scroll on any browser that does not support it. The marquee case is different and already handled by grapesScroll.ts — this is for content a visitor drags, not content that animates on its own. */ .cf-hscroll { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: var(--cf-column-gap, 24px); scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; /* The rail is edge-to-edge on a phone but must not sit under the section gutter on desktop, so padding comes from the scroll container rather than the items. */ padding-bottom: 4px; scrollbar-width: thin; } .cf-hscroll > * { flex: 0 0 auto; scroll-snap-align: start; } /* Opt-in widths for rail items, so a template does not hardcode one. */ .cf-hscroll-sm > * { width: min(260px, 78vw); } .cf-hscroll-md > * { width: min(340px, 84vw); } .cf-hscroll-lg > * { width: min(460px, 88vw); } /* A rail whose scrollbar would be visual noise. The content is still reachable by drag, wheel and keyboard — only the bar is hidden. */ .cf-hscroll-clean { scrollbar-width: none; -ms-overflow-style: none; } .cf-hscroll-clean::-webkit-scrollbar { display: none; } /* Editorial multi-column text. Two reference sites set long copy in columns; done by hand it needs column-count plus the break rules, and both were routinely missed. */ .cf-columns-2 { column-count: 2; column-gap: var(--cf-column-gap, 24px); } .cf-columns-3 { column-count: 3; column-gap: var(--cf-column-gap, 24px); } .cf-columns-2 > *, .cf-columns-3 > * { /* Without this a card or heading is sliced across the column boundary. */ break-inside: avoid; -webkit-column-break-inside: avoid; } /* A free aspect ratio, for the cases the four fixed cf-media-* classes do not cover. The ratio is a variable so a template sets it inline on the element's own class rather than redefining this one. */ .cf-ratio { position: relative; width: 100%; aspect-ratio: var(--cf-ratio, 16 / 9); overflow: hidden; border-radius: var(--cf-img-radius, 10px); } .cf-ratio > img, .cf-ratio > video, .cf-ratio > iframe { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; } /* Frosted panel. Four of the reference sites use a backdrop blur over an image or a video; hand-rolled it was usually missing the -webkit- prefix and the fallback background, so it rendered as a flat transparent box in Safari and over a video in anything that refused the filter. */ .cf-frost { background: var(--cf-frost-bg, rgba(255, 255, 255, 0.72)); -webkit-backdrop-filter: blur(var(--cf-frost-blur, 14px)); backdrop-filter: blur(var(--cf-frost-blur, 14px)); border: 1px solid var(--cf-card-border, rgba(0, 0, 0, 0.1)); border-radius: var(--cf-card-radius, 28px); } /* The same panel on a dark ground, since --cf-text is not a surface. */ .cf-frost-dark { background: var(--cf-frost-dark-bg, rgba(0, 0, 0, 0.42)); -webkit-backdrop-filter: blur(var(--cf-frost-blur, 14px)); backdrop-filter: blur(var(--cf-frost-blur, 14px)); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--cf-card-radius, 28px); } /* A radius scale. Four sites use a radius far larger than --cf-radius, and every one of them wrote a literal, which a tenant's theme could then never change. These stay proportional to the theme's own value. */ .cf-round-sm { border-radius: calc(var(--cf-radius, 14px) * 0.5); } .cf-round-md { border-radius: var(--cf-radius, 14px); } .cf-round-lg { border-radius: calc(var(--cf-radius, 14px) * 2); } .cf-round-xl { border-radius: calc(var(--cf-radius, 14px) * 3); } .cf-round-pill { border-radius: 999px; } /* The tracked-caps eyebrow. .cf-kicker already exists for the eyebrow's ROLE; this is the type treatment on its own, for the labels, badges and section numbers that are not kickers. It was the single most re-implemented snippet in the library. */ .cf-tracked { text-transform: uppercase; letter-spacing: var(--cf-tracked-spacing, 0.14em); font-size: var(--cf-tracked-size, 12px); font-weight: 600; font-family: var(--cf-font-accent, inherit); } /* A hairline rule that follows the theme's divider colour. Templates drew these with a bordered empty div and a literal colour. */ .cf-rule { border: 0; border-top: 1px solid var(--cf-divider, #eee); margin: 0; width: 100%; } /* Overlap composition: a panel that pulls up over the section above it. This is the one that matters most. It is the commonest reason a layout reached for position:absolute, and absolute positioning is why those layouts broke on a phone — the overlap is a desktop effect that has to be dropped when the content stacks, and a hand-rolled one never was. Here the pull is a margin, so the element stays in flow, and the responsive block below simply zeroes it. */ .cf-pull-up-sm { margin-top: calc(var(--cf-pull, 40px) * -1); } .cf-pull-up-md { margin-top: calc(var(--cf-pull, 80px) * -1); } .cf-pull-up-lg { margin-top: calc(var(--cf-pull, 140px) * -1); } /* An element that must paint above the section it overlaps. Kept with the pull helpers because an overlap without it is invisible. */ .cf-layer { position: relative; z-index: 1; } /* Equal-height children in a row that is not a grid. Flex children stretch by default, but a template that set align-items elsewhere lost it, so this states it explicitly for card rows. */ .cf-stretch > * { height: 100%; } /* A full-bleed band inside a shell: breaks the container without the 100vw + negative-margin trick, which overflows whenever a scrollbar is present. */ .cf-bleed { width: 100%; max-width: none; margin-left: 0; margin-right: 0; } /* Alignment helpers. */ .cf-align-start { align-items: flex-start; } .cf-align-center { align-items: center; } .cf-align-end { align-items: flex-end; } .cf-justify-center { justify-content: center; } .cf-justify-between { justify-content: space-between; } .cf-text-center { text-align: center; } .cf-text-left { text-align: left; } @media (max-width: 900px) { .cf-grid-2, .cf-grid-3, .cf-split { grid-template-columns: 1fr; } /* Wide grids step down rather than collapsing straight to one column. */ .cf-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Every named split stacks on tablet. */ .cf-split-30-70, .cf-split-40-60, .cf-split-50-50, .cf-split-60-40, .cf-split-70-30, .cf-split-25-75, .cf-split-33-67, .cf-split-67-33, .cf-split-75-25 { grid-template-columns: minmax(0, 1fr); } /* Wide grids step down rather than collapsing in one go, matching how .cf-grid-4 is handled above. */ .cf-grid-5, .cf-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cf-columns-3 { column-count: 2; } /* An overlap is a desktop composition. Once the layout stacks there is nothing above to overlap, and the negative margin would simply eat the section's padding. This is the failure that a hand-rolled, absolutely-positioned overlap could not avoid. */ .cf-pull-up-sm, .cf-pull-up-md, .cf-pull-up-lg { margin-top: 0; } /* Sticky must not persist once the layout is stacked. */ .cf-sticky { position: static; top: auto; } .cf-bento-grid { grid-template-columns: 1fr !important; grid-template-rows: auto !important; } .cf-bento-hero, .cf-bento-wide { grid-column: span 1 !important; grid-row: span 1 !important; } .cf-bento-hero { min-height: 220px; } .cf-section { /* §5: --space-48 at tablet, with the §4 tablet gutter (20px). Scaled rather than a fallback, for the same reason as the phone breakpoint below: a real theme always sets the variable, so the 48px here never applied and tablets kept full desktop padding. 0.6 puts the 88px default at ~53px. */ padding: calc(var(--cf-section-padding-top, 80px) * 0.6) 20px calc(var(--cf-section-padding-bottom, 80px) * 0.6); } footer.cf-section { --cf-section-padding-top: var(--cf-footer-padding-top, 40px); --cf-section-padding-bottom: var(--cf-footer-padding-bottom, 28px); } } /* Phone. The 900px block above steps wide grids down to 2 columns; this * takes every remaining multi-column layout to a single column. */ @media (max-width: 600px) { .cf-grid-2, .cf-grid-3, .cf-grid-4, .cf-grid-auto { grid-template-columns: minmax(0, 1fr); } /* A six-across logo wall is still legible at two columns on a phone; one column would turn it into a very long list. */ .cf-grid-5, .cf-grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cf-columns-2, .cf-columns-3 { column-count: 1; } /* Rails get the section's own gutter back as end padding, so the last card does not sit flush against the screen edge. */ .cf-hscroll { padding-right: 16px; } .cf-section { /* §5: --space-32 on phones, with the §4 mobile gutter (16px). ------------------------------------------------------------------ SCALED, not a fallback. Written as var(--cf-section-padding-top, 32px) this only reached 32px when the theme left the variable unset — and every real theme sets it. The default theme sets 88px, so phones kept the full desktop padding: 176px per section instead of the 64px this rule says it applies, on top of grids that have just stacked to one column and are already tall. Scaling the theme's own value keeps a tenant who deliberately chose roomy sections roomier than one who did not, which a flat 32px would throw away. 0.4 lands the 88px default on ~35px, close to the §5 figure this rule was always meant to produce. */ padding: calc(var(--cf-section-padding-top, 80px) * 0.4) 16px calc(var(--cf-section-padding-bottom, 80px) * 0.4); } footer.cf-section { --cf-section-padding-top: var(--cf-footer-padding-top, 32px); --cf-section-padding-bottom: var(--cf-footer-padding-bottom, 24px); } /* Large utility gaps are desktop proportions; tighten them on a phone * so a stacked layout doesn't turn into a scroll marathon. */ .cf-gap-lg { gap: 28px; } .cf-gap-xl { gap: 36px; } .cf-gap-row-lg { row-gap: 28px; } .cf-gap-row-xl { row-gap: 36px; } .cf-gap-col-lg { column-gap: 20px; } .cf-gap-col-xl { column-gap: 24px; } } /* Product Detail interactive blocks — state classes toggled by * grapesProductDetailRuntime.ts (GrapesProductDetailInteractiveHydrator.tsx). */ .cf-variant-swatch.cf-variant-active, [data-cf-variant-option-value].cf-variant-active { border-color: var(--cf-primary, #111) !important; outline: 2px solid #fff; outline-offset: -4px; } [data-cf-variant-option-value].cf-variant-unavailable { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; } [data-cf-gallery-thumb].cf-gallery-thumb-active { border-color: var(--cf-primary, #111) !important; } /* An injected logo always renders at a standard size. * * The binder (bindHeaderLogo.ts) writes inline height/width, but GrapesJS * LIFTS every inline declaration into an #id rule on parse and strips the * attribute. The stored HTML then carries no sizing at all, so whenever * those id rules do not reach the canvas - a header bound after the CSS * loaded, a re-bind that minted new ids - the image falls back to its * INTRINSIC size. Measured with a 600x400 logo: 150x40 with the rules * present, 600x400 without. * * Class-based, so it does not depend on ids that change. Not !important: * a tenant who drags the logo bigger gets an #id rule at (1,0,0), which * outranks this (0,1,0) and wins. A floor, not a cap. */ .cf-logo-box { display: inline-block; height: var(--cf-logo-height, 40px); width: var(--cf-logo-width, 150px); flex: 0 0 auto; } .cf-logo-img { height: 100%; width: 100%; object-fit: contain; object-position: left center; display: block; } /* A hydrated nav needs spacing of its own. * * grapesMenuBinding clones a template item once per menu entry, producing * children. Templates style their OWN nav class * (header-v3-nav and friends) but know nothing about cf-menu-item, so the * clones inherit display:inline with zero margin and run together - * "HomeAbout UsOur ServicesOur Ventures" with no gaps. * * Measured on the live header: nav display:block, gap:normal, every item * margin:0 padding:0. * * Flex with a gap on the loop is the fix; the token lets a theme widen it. * A template that already lays its nav out keeps doing so - these are * single-class rules at (0,1,0), which a template's own compound selector * outranks. */ /* :where() gives these ZERO specificity, so ANY rule a template writes for * its own nav wins - including one that appears earlier in the cascade. * * All five stored header templates already lay their nav out * (.header-v1-nav ... .header-v5-nav, each with its own display:flex and * gap). A plain .cf-menu-loop rule at (0,1,0) ties with those and the later * sheet wins, so this silently replaced every template's gap - measured: * template gap 34px, overridden to 28px. Reported as "whatever header I * choose, the design gets messed up". * * Zero specificity makes this a genuine FALLBACK: it lays out a hydrated nav * that nothing else styles, and gets out of the way otherwise. */ :where(.cf-menu-loop) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cf-nav-gap, 28px); } :where(.cf-menu-item) { display: inline-flex; align-items: center; } /* An imported design that ships its own mobile menu (data-cf-nav-static, * siteZipImport) wrote its links as direct children of the nav. The loop's * .cf-menu-item wrapper is taken out of layout (display:contents) so the * design's own rules (".mobile-drawer nav a") lay out the same boxes as in * the source; the fallback above had turned its stacked drawer list into a * wrapping row. Zero specificity, so any rule of the design still wins. */ :where([data-cf-nav-static] .cf-menu-loop) { display: block; } :where([data-cf-nav-static] .cf-menu-item) { display: contents; } /* A logo the binder did not wrap - a template's own inside a brand * element - still gets a ceiling, so it can never render at image size. */ .cf-brand img:not(.cf-logo-img), [class*="-brand"] img:not(.cf-logo-img) { max-height: var(--cf-logo-height, 40px); width: auto; object-fit: contain; } /* ── Section finishes ────────────────────────────────────────────────── * * See sectionFinish.ts for why this exists: the tenant's theme already * varies ground/radius/shadow/type per site, but every image, heading and * button inside a section rendered with the SAME finish regardless of * which of the library's curated visual styles (midnight-glass, * brutalist-mono, luxury-gold, ...) the chosen template belongs to. These * six classes are the fix - one is added to a section's root by * applySectionFinish, picked deterministically from the template's own * 'style' field, no model call involved. * * Targets .cf-image, .cf-title, .cf-body and .cf-button rather than * .cf-card: measured across the real 378-template library, .cf-card * appears in exactly 1 of them (each template authors its own prefixed * card class instead - ly-*, hwl-*, fleet-*, and so on), while .cf-image * (102), .cf-title (197), .cf-body (168) and .cf-button (128) are the * classes templates actually and consistently use. * * Every rule here is a DESCENDANT selector under the finish class, never * a bare .cf-image/.cf-title/.cf-button. That is what makes this * additive: a template or theme rule for .cf-image still applies * underneath, these only add the touches that make one style feel like * metal and another feel like linen. Every value stays * var(--cf-x, fallback) so a tenant's own theme tokens (radius, shadow, * colour) keep governing the base look - a finish changes HOW those * tokens render, never what they are. */ /* brutalist-mono: hard edges, no shadow, a visible rule instead of a glow. */ .cf-finish-sharp-mono .cf-image { border-radius: 2px; filter: grayscale(0.15) contrast(1.08); } .cf-finish-sharp-mono .cf-title { letter-spacing: 0.01em; } .cf-finish-sharp-mono .cf-button { border-radius: 2px; } /* luxury-gold: a deeper, warmer image radius and a hairline gold button border. */ .cf-finish-soft-luxe .cf-image { border-radius: calc(var(--cf-img-radius, 10px) * 1.4); } .cf-finish-soft-luxe .cf-title { letter-spacing: 0.015em; } .cf-finish-soft-luxe .cf-button { border-color: color-mix(in srgb, var(--cf-primary, #9a6b1f) 45%, transparent); box-shadow: 0 18px 40px color-mix(in srgb, var(--cf-primary, #9a6b1f) 20%, transparent); } /* sunrise-warm / pastel: rounder, airier image corners. */ .cf-finish-rounded-warm .cf-image { border-radius: calc(var(--cf-img-radius, 10px) * 1.6); } .cf-finish-rounded-warm .cf-button { border-radius: calc(var(--cf-btn-radius, 8px) * 1.5); } /* midnight-glass / neon-tech: a brighter rim light on hover, richer image contrast. */ .cf-finish-glass-deep .cf-image { filter: saturate(1.05) contrast(1.04); transition: filter var(--cf-anim-duration, 0.3s) var(--cf-anim-easing, ease-out); } .cf-finish-glass-deep .cf-button:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cf-accent, #14b8a6) 35%, transparent); } /* editorial-serif / corporate-trust: flat, precise, a quiet rule under headings. */ .cf-finish-editorial-ink .cf-title { letter-spacing: -0.005em; padding-bottom: 6px; border-bottom: 1px solid var(--cf-divider, #eee); display: inline-block; } .cf-finish-editorial-ink .cf-button { border-radius: calc(var(--cf-btn-radius, 8px) * 0.5); } /* vibrant-gradient / bold-conversion: punchier hover lift, saturated image. */ .cf-finish-vivid-pop .cf-image { filter: saturate(1.15); } .cf-finish-vivid-pop .cf-button { transition: transform var(--cf-anim-duration, 0.3s) var(--cf-anim-easing, ease-out), box-shadow var(--cf-anim-duration, 0.3s) var(--cf-anim-easing, ease-out); } .cf-finish-vivid-pop .cf-button:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 20px 45px color-mix(in srgb, var(--cf-primary, #2563eb) 35%, transparent); } /* ── Mobile rail ─────────────────────────────────────────────────────── * * See sectionMobileRail.ts for why this exists: a short grid of media * cards (3-4 photos, each its own card) is two tidy rows on desktop and a * multi-screen vertical scroll on a phone, because every cf-grid-N * collapses to one column at 600px (the rule just above this one). A * section measured at 2,880px tall on mobile was exactly this shape. * * applyMobileRail adds cf-mobile-rail to a QUALIFYING section's root * (>=3 items, majority carrying real media). These rules retarget that * section's OWN cf-grid-N wrapper to the existing cf-hscroll rail * pattern — same scroll-snap mechanics, same "no JS runtime needed" — but * ONLY inside the 600px breakpoint, so desktop/tablet render exactly as * authored. '.cf-mobile-rail .cf-grid-N' outranks the bare '.cf-grid-N' * rule above regardless of source order (two classes beat one), so this * never depends on where either block sits in the sheet. */ @media (max-width: 600px) { .cf-mobile-rail .cf-grid-2, .cf-mobile-rail .cf-grid-3, .cf-mobile-rail .cf-grid-4, .cf-mobile-rail .cf-grid-5, .cf-mobile-rail .cf-grid-6, .cf-mobile-rail .cf-grid-auto, /* cf-columns-N (editorial multi-column text) has the same mobile failure mode when a template uses it for media cards instead of prose: column-count flows top-to-bottom per column, so on a phone every card still ends up full-width and stacked. column-count is reset explicitly, not just left to display:flex, since Safari has been inconsistent about which wins when both are set. */ .cf-mobile-rail .cf-columns-2, .cf-mobile-rail .cf-columns-3 { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; column-count: 1; gap: var(--cf-column-gap, 24px); scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 4px; padding-right: 16px; scrollbar-width: thin; } .cf-mobile-rail .cf-grid-2 > *, .cf-mobile-rail .cf-grid-3 > *, .cf-mobile-rail .cf-grid-4 > *, .cf-mobile-rail .cf-grid-5 > *, .cf-mobile-rail .cf-grid-6 > *, .cf-mobile-rail .cf-grid-auto > *, .cf-mobile-rail .cf-columns-2 > *, .cf-mobile-rail .cf-columns-3 > * { flex: 0 0 auto; scroll-snap-align: start; width: min(280px, 78vw); } } 2a:["$","main",null,{"className":"min-h-screen","children":[["$","h1",null,{"className":"sr-only","children":"Principal's Desk"}],["$","style",null,{"dangerouslySetInnerHTML":{"__html":"$2b"}}],null,[]]}] 2c:I[27201,["$2","$3","$4","$5"],"IconMark"] 1f:null 25:[["$","title","0",{"children":"Principal's Desk"}],["$","link","1",{"rel":"canonical","href":"https://pcmt-india.net/principals-desk"}],["$","meta","2",{"property":"og:title","content":"Principal's Desk"}],["$","meta","3",{"property":"og:type","content":"website"}],["$","meta","4",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","5",{"name":"twitter:title","content":"Principal's Desk"}],["$","link","6",{"rel":"shortcut icon","href":"/api/favicon"}],["$","link","7",{"rel":"icon","href":"/favicon.ico?favicon.2vob68tjqpejf.ico","sizes":"256x256","type":"image/x-icon"}],["$","link","8",{"rel":"icon","href":"/api/favicon"}],["$","link","9",{"rel":"apple-touch-icon","href":"/api/favicon"}],["$","$L2c","10",{}]] 2d:I[673710,["$2","$3","$4","$5","$7","$8","$9","$a","$b","$c","$d","$e","$f","$10","$11","$12","$13"],"CartShell"] 2e:"FrontendAuthProvider" 2f:I[942217,["$2","$3","$4","$5","$7","$8","$9","$a","$b","$c","$d","$e","$f","$10","$11","$12","$13"],"$2e"] 30:Ta14,/* ── CF Theme Variables (auto-generated) ─────────────────────────── */ :root { --cf-font-size-h1: 56px; --cf-font-size-h2: 40px; --cf-font-size-h3: 28px; --cf-font-size-h4: 22px; --cf-font-size-h5: 18px; --cf-font-size-h6: 16px; } /* Manual toggle override */ [data-theme="dark"] { --cf-font-size-h1: 56px; --cf-font-size-h2: 40px; --cf-font-size-h3: 28px; --cf-font-size-h4: 22px; --cf-font-size-h5: 18px; --cf-font-size-h6: 16px; } [data-theme="light"] { --cf-font-size-h1: 56px; --cf-font-size-h2: 40px; --cf-font-size-h3: 28px; --cf-font-size-h4: 22px; --cf-font-size-h5: 18px; --cf-font-size-h6: 16px; } /* ── CF Theme Utility Rules ───────────────────────────────────── */ .cf-site { } .cf-button.cf-button-secondary, .cf-button-secondary, button.cf-button-secondary, a.cf-button-secondary { background: transparent !important; background-color: transparent !important; color: var(--cf-btn-secondary-text, var(--cf-btn-bg, var(--cf-text, #0b6b57))) !important; border: 2px solid var(--cf-btn-secondary-border, var(--cf-btn-bg, var(--cf-border, #0b6b57))) !important; box-shadow: none !important; } .cf-button.cf-button-secondary:hover, .cf-button-secondary:hover, button.cf-button-secondary:hover, a.cf-button-secondary:hover { background: var(--cf-btn-secondary-hover-bg, rgba(0, 0, 0, 0.06)) !important; background-color: var(--cf-btn-secondary-hover-bg, rgba(0, 0, 0, 0.06)) !important; color: var(--cf-btn-secondary-text, var(--cf-btn-bg, var(--cf-text, #0b6b57))) !important; border-color: var(--cf-btn-secondary-hover-border, var(--cf-btn-bg, var(--cf-border, #0b6b57))) !important; } .cf-button.cf-button-link, .cf-button-link, button.cf-button-link, a.cf-button-link { background: transparent !important; background-color: transparent !important; border: none !important; border-color: transparent !important; padding: 0 !important; min-height: auto !important; color: var(--cf-link, var(--cf-primary, var(--cf-btn-bg, #0b6b57))) !important; text-decoration: underline !important; box-shadow: none !important; } .cf-button.cf-button-link:hover, .cf-button-link:hover, button.cf-button-link:hover, a.cf-button-link:hover { background: transparent !important; background-color: transparent !important; color: var(--cf-link-hover, var(--cf-link, var(--cf-primary, var(--cf-btn-bg, #0b6b57)))) !important; text-decoration: underline !important; }31:T8b03,@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css'); @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); @import url('https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css'); @import url(effect.css); @import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css'); /* @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Space+Grotesk:wght@300..700&display=swap'); */ :root { --primary: #132040; /*blue from bca light*/ --primary2: #0a1628; /*blue from bca dark*/ --secondary: #c57f09; /*red from bca*/ --secondary2: #F59E0B; --gold1: #F59E0B; /*lite*/ --gold2: #F59E0B; /*deep from bca*/ --gold: #c9993a; --gold-lt: #e8c06a; --gold-light: #e8c06a; --blue1: #0b1d3a; --blue2: #132847; /* --link: #df201e; */ --link: #007fff; --link2: color-mix(in srgb, var(--link) 80%, black); --accent: #D4AF37; --black: #000; --white: #fff; --light: #FAF9F6; --gray: #777; --bg-light: #FAF9F6; --font-body: 'Poppins', sans-serif!important; --font-heading: "Playfair Display", serif!important; --bg-body: #fff; --rad: 6px; --bs-heading-color: #000; --slate: #4a5568; --slate-light: #4a5568!important; --red: #a51c30; --gray: #000!important; --border2: #132040!important } .border-blue,.border2{border: 1px solid #132040!important} :root { --crimson: #0d0054; --crimson-dark: #0a003e; --crimson-light: #007fff; --black: #0a0a0a; --near-black: #1a1a1a; --gray-dark: #3d3d3d; --gray-mid: #6b6b6b; --gray-light: #e8e4df; --gray-bg: #f5f2ee; --gray-rule: #d0cbc4; --white: #ffffff; --serif: 'EB Garamond', Georgia, serif; --sans: 'Libre Franklin', sans-serif; --nav-h: 68px; --dark: #000; --muted: #000; } .text-center.mb-12 h2.text-2xl{text-align: left!important; padding-left: 80px} header nav{ flex-wrap: wrap; gap: 5px 20px !important; padding-left: 50px; justify-content: flex-end; } header nav a, header button{ font-size: 15px!important; letter-spacing: 0!important; color: #000!important; padding: 6px 2px!important; } header nav a:hover, header button:hover{ color: var(--red)!important; opacity: 1!important; } header nav span{ opacity: 1!important } header nav span.absolute{ background-color: var(--red)!important; height: 1px !important; } header nav div.relative{ padding: 10px 0; } header nav div.absolute{ min-width: 250px; } header nav div.absolute a{ position: relative; padding: 10px 23px!important } header nav div.absolute a:hover{ color: var(--red)!important; opacity: 1!important } header nav div.absolute a:after{ display: inline-block; font-family: bootstrap-icons !important; font-style: normal; font-weight: normal !important; font-variant: normal; text-transform: none; line-height: 1; vertical-align: -.125em; -webkit-font-smoothing: antialiased; position: absolute; content:'\f138'; top: 50%; right: 30px; transform: translateY(-50%); opacity: 0; transition: ease-in-out 0.2s } header nav div.absolute a:hover:after{ right: 10px; opacity: 1; color: var(--red) } header nav div.absolute a+a{ border-top: 1px solid #ddd } body,html{ min-height: 100vh; } body{ font-family: var(--font-body); font-weight: normal; line-height: 1.5; position: relative; overflow-x: hidden; background: var(--bg-body); color: #000; } h1,h2,h3,h4,h5,h6{ font-family: var(--font-heading)!important; font-weight: bold!important } h1,h2,h3{ margin-bottom: 20px; } h4,h5,h6{ margin-bottom: 15px } h2 span{ color: var(--secondary2) } .ffh{ font-family: 'Playfair Display', serif!important; } .program-card,.feature-tile,.testimonial-card{ transition:transform .2s ease, box-shadow .2s ease; } .program-card:hover,.feature-tile:hover,.testimonial-card:hover{ transform:translateY(-4px); box-shadow:0 1rem 2rem rgba(11,29,58,.08); } .program-media,.event-media,.map-box{ min-height:180px; background:var(--light); border:1px solid rgba(11,29,58,.08); } .campus-tile{ min-height:150px; } /* .ticker-wrap{ overflow:hidden; position:relative; width:100%; } */ .campus-icon-wrap { font-size: 32px; margin-bottom: 16px; } /* .ticker-track{ display:flex; width:max-content; will-change:transform; animation-name:ticker-rtl; animation-timing-function:linear; animation-iteration-count:infinite; animation-duration:var(--ticker-duration,18s); } .ticker-group{ display:flex; align-items:center; flex-shrink:0; white-space:nowrap; padding-right:2rem; } */ /* .ticker-text{ white-space:nowrap; } @keyframes ticker-rtl{ 0%{ transform:translateX(0); } 100%{ transform:translateX(calc(-1 * var(--ticker-distance, 0px))); } } */ .flex{ display: flex; } .flex-center{ display: flex; align-items: center; } .flex-sb{ display: flex; justify-content: space-between; } .flex-start{ display: flex; justify-content: flex-start; } .justify-center{ display: flex; justify-content: center; } .flex-end { display: flex; align-items: flex-end; } .flex-stretch{ display: flex; align-items: stretch; } .flex-sa{ display: flex; justify-content: space-around; } .fw-300{ font-weight: 300!important } .fw-400{ font-weight: normal!important } .fw-500{ font-weight: 500!important } .fw-600{ font-weight: 600!important } .bold, .fw-700, b{ font-weight: bold!important } .heavy, .fw-800{ font-weight: 900!important } strong{ font-weight: 600!important } .fs-11{ font-size: 11px!important; } .fs-12{ font-size: 12px!important; } .fs-13{ font-size: 13px!important; } .fs-14{ font-size: 14px!important; } .fs-15{ font-size: 15px!important; } .fs-20{ font-size: 20px!important; line-height: 1.4 } .fs-24{ font-size: 24px!important; line-height: 1.3 } .fs-30{ font-size: 30px!important; line-height: 1.25 } .fs-32{ font-size: 32px!important; line-height: 1.25 } .fs-36{ font-size: 36px!important; line-height: 1.2 } .fs-40{ font-size: 40px!important; line-height: 1.2 } .fs-50{ font-size: 50px!important; line-height: 1.2 } .rad-0{ border-radius: 0!important } h1{ font-size: 50px!important; } .h2{ font-size: 45px!important; } h2,.h3{ font-size: 38px!important; } h3,.h4{ font-size: 30px!important; } h4,.h5{ font-size: 24px!important; } h5,.h6{ font-size: 20px!important; } h6{ font-size: 18px!important; } .lead{ font-size: 18px!important; line-height:1.6; font-weight:400; } .lead-lg{ font-size: 20px!important; line-height:1.6; font-weight:400; } textarea{ resize: none } .anim{ transition: ease-in-out 0.2s } a:hover,a:focus,a:active, button:hover,button:focus,button:active{ outline: 0; } a{ color: var(--link); transition: ease-in-out 0.2s; text-decoration: none!important; } a:hover{ color: var(--link2); } button,a{ outline: none; outline: 0 } .btn:focus{ box-shadow: none!important } .img-thumbnail,.btn, .form-control{ border-radius: var(--rad); } .form-control{ font-size: 16px; padding: 8px 16px; height: auto; min-height: 44px } .form-control:focus{ box-shadow: none; border-color: var(--primary) } .btn{ font-size: 16px; letter-spacing: 1px; font-weight: 400; padding: 10px 20px; transition: ease-in-out 0.15s; border-radius: 5px; } .btn.btn-sm{ font-size: 15px; padding: 10px 20px; } .btn-primary, :not(.btn-check)+.btn:active{ background: var(--primary); border-color:var(--primary); color: var(--white); } .btn-primary:hover,.btn-primary:active,.btn-primary:focus,.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle{ background: var(--primary2); border-color: var(--primary2); color: var(--white); } .btn-outline-primary,.btn:focus-visible{ background: #fff; border-color: var(--primary); color: var(--primary); } .btn-outline-primary:hover,.btn-outline-primary:active,.btn-outline-primary:focus{ background: var(--primary); border-color:var(--primary); color: #fff; } .btn-secondary{ background: var(--secondary2); border-color:var(--secondary2); color: var(--white); } .btn-secondary:hover,.btn-secondary:focus,.btn-secondary:active{ background: var(--secondary); border-color: var(--secondary); color: var(--white) } .btn-outline-secondary,.btn:focus-visible{ background: #fff; border-color: var(--secondary2); color: var(--secondary2); } .btn-outline-secondary:hover,.btn-outline-secondary:active,.btn-outline-secondary:focus{ background: var(--secondary2); border-color:var(--secondary2); color: #fff; } .btn-light{ background-color: #D9D9D9 } .text-primary{ color: var(--primary)!important; } .text-secondary{ color: var(--secondary)!important; } .text-gray{ color: var(--gray); } .bg-primary{ background: var(--primary)!important; color: #fff } .bg-secondary2{ background: var(--secondary)!important; color: #fff } .bg-primary2{ background: var(--primary2)!important; color: #fff } .bg-secondary{ background: var(--secondary2)!important; color: #fff } .bg-gray{ background: var(--gray)!important; color: #fff } /*home*/ .hero{ background: url(https://nova-care-upload.s3.ap-south-1.amazonaws.com/upload-data/tenants/69de7419b31165d858b64e0b/media/home-banner-2-1778409895423-243d6614.webp) center right no-repeat; background-size: cover; min-height: 530px; } .hero-content{ position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; left: 0; width: 100%; max-width: 730px; } .hero-content blockquote{ position: relative; padding-left: 60px; } .hero-content blockquote i{ position: absolute; left: -8px; top: -12px; font-size: 60px; line-height: 1; color: #fff; } .badge{ background: var(--secondary); font-weight: normal; color: #fff; font-size: 13px; padding: 8px 16px; border-radius: 30px; } .ellipsis5{ display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .btn > i, .link > i { display: inline-block; } .top3text span{ padding-right: 10px; font-size: 14px; display: inline-block } .btn:hover > i, .link:hover > i { animation: arrowWave 0.6s ease-in-out infinite alternate; } @keyframes arrowWave { from { transform: translateX(0); } to { transform: translateX(6px); } } .rec-scroll{ display:flex; overflow:hidden; gap:0; background: #ff2500c2 } .rec-track{ display:flex; animation:recscroll 28s linear infinite; gap:1px } .rec-item{ background: var(--secondary); padding: 10px 24px; font-size: 18px; font-weight: 300; color: var(--white); white-space: nowrap; letter-spacing: 1px; flex-shrink: 0; } @keyframes recscroll{ 0%{ transform:translateX(0) } 100%{ transform:translateX(-50%) } } .ticker { display: flex; align-items: center; gap: 14px; overflow: hidden; } .ticker-badge { background: var(--primary); color: #fff; font-size: 16px; padding: 5px 12px; border-radius: 6px; font-weight: 500; text-transform: uppercase; flex-shrink: 0; } .ticker-wrap { overflow: hidden; flex: 1; } .ticker-track { display: flex; width: max-content; animation: ticker-scroll 40s linear infinite; } .ticker-group { display: flex; align-items: center; white-space: nowrap; flex-shrink: 0; } .ticker-group span { white-space: nowrap; } .tsep { margin: 0 18px; opacity: 0.5; } @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .cmspage p{ margin-bottom: 15px; } /* .custom-component-wrapper:not(:first-child){ padding-top: 60px; padding-bottom: 60px; } */ .path-box { display: flex; flex-wrap: wrap; border-top: 1px solid #ccc; border-left: 1px solid #ccc; } .path-card { width: 20%; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 16px 16px 10px; position: relative; background: #fff; transition: ease-in-out 0.2s; } .path-card + .path-card { border-left: 0; } @media (max-width: 991px) { .path-card { width: 33.3333%; } .text-center.mb-12 h2.text-2xl{padding-left: 30px} .info-card h5{white-space: normal} } /* mobile */ @media (max-width: 576px) { .path-card { width: 100%; } } .path-card img{ width: 100% } .path-card .p1 { color: color: #000; font-size: 13px; } .path-card h5 { color: color: #000!important; } .path-card span.number{ position: absolute; top: -5px; z-index: 2; right: 20px; color: #eee; font-size: 40px; font-family: var(--font-heading) } .path-card .p2 { font-size: 14px; } .path-card .p3 { font-size: 13px; color: #000; } .path-card a{ font-size: 15px; color: #000 } .path-card a:hover{ text-decoration: underline!important } .blog-list-home a{ position: relative; padding-bottom: 20px; box-shadow: none!important; display: black } .blog-list-home a h3{ font-size: 22px !important; font-weight: normal; color: #333; margin-bottom: 12px !important; } .blog-list-home a p{ font-size: 15px!important; color: #777!important } .blog-list-home a div.mt-4{ position: absolute; left: 20px; font-weight: 400; bottom: 20px; margin: 0 !important; } .blog-list-home a div.mt-4 span{ font-weight: 400 !important; font-size: 14px; } footer, footer h3, footer h4, footer h5, footer h6, footer p, footer a{ color: #fff } .list-dot,.list-dots { list-style: disc; padding-left: 1.2rem; margin-left: 20px } .list-dot li+li,.list-dots li+li{ margin-top: 10px } .text-dark{ color: #333!important } .theme-dark{ background:#0a003e; } .theme-dark-alt{ background:#0d0054; } .theme-light{ background:#f8f9fa; } .theme-accent{ color:#df201e; } .btn-accent{ background:#df201e; color:#fff; } .btn-accent:hover{ background:#b81a18; color:#fff; } .section-pad{ padding:80px 0; } @media(max-width:768px){ .section-pad{ padding:60px 0; } } .card-hover{ transition:.3s; } .card-hover:hover{ transform:translateY(-6px); box-shadow:0 12px 30px rgba(0,0,0,.2); } /* SCROLL ANIMATION */ .reveal{ opacity:0; transform:translateY(40px); transition:.6s ease; } .reveal.active{ opacity:1; transform:translateY(0); } /* HERO OVERLAY */ .overlay-dark{ background:linear-gradient(120deg,rgba(0,0,0,.7),rgba(0,0,0,.2)); } /* STICKY APPLY BAR */ .sticky-apply{ position:fixed; bottom:0; left:0; width:100%; background:#0a003e; padding:10px; z-index:999; box-shadow:0 -2px 10px rgba(0,0,0,.3); } .sticky-apply a{ flex:1; } .dataClr{ border:#a51c30 1px solid; color:#a51c30; } .dataClr:hover{ border:#a51c30 1px solid; background:#a51c30; } .badgeRed{ background:#a51c30 !important; } /* MOBILE FIX */ @media(min-width:992px){ .sticky-apply{ display:none; } .common-hero > .container-fluid{padding-right:0!important} } .theme-dark, .theme-dark-alt { color: #fff; } .theme-dark p, .theme-dark small, .theme-dark li, .theme-dark .text-muted, .theme-dark-alt p, .theme-dark-alt small, .theme-dark-alt li, .theme-dark-alt .text-muted { color: #fff !important; } .theme-dark .table, .theme-dark-alt .table { color: #fff; } .small-heading{ display: block; font-size: 14px; text-transform: uppercase; color: #a51c30; margin-bottom: 15px!important } .small-heading2{ display: block; font-size: 14px; text-transform: uppercase; color: #ffff; margin-bottom: 15px!important } .animate-marquee img{ padding: 2px 5px; background: #fff; border-radius: 5px; height: 60px!important; } .info-card{ height: 200px; position: relative; background-size: cover; background-position: center; border-radius: 8px; overflow: hidden } .info-card h5{ color: #fff; text-align: center; position: absolute; top: 70%; left: 50%; transform: translate(-50%,-50%); z-index: 3; transition: ease-in-out 0.2s; white-space: nowrap; } .info-card:hover h5{ top: 50%; left: 50%; transform: translate(-50%,-50%); } .info-card .hover{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; background: rgba(0,0,0,0.3); transition: ease-in-out 0.2s } .info-card:hover .hover{ background: rgba(0,0,0,0.5) } section.py-10 div.flex.w-max div{ padding: 5px 10px !important; border-radius: 6px; overflow: hidden; background: #fff; } section.py-10 div.flex.w-max img.h-14{ height: auto!important; width: 110px } section.py-10 div.mx-auto.px-4{padding-left: 0!important; padding-right:0!important} .blog-list-home a div.w-full.overflow-hidden{ width: 100%; height: auto; } .blog-list-home a div.w-full.overflow-hidden img{ width: 100%!important; height: auto!important; } .blog-list-home div.p-6.flex.flex-col.flex-grow{background:#fff; border-radius: 0 0 10px 10px; box-shadow: 0px 9px 10px #eee; padding-bottom: 40px} div.text-white *{color: #fff} .faq-list { margin-top: 3rem; border-top: 2px solid var(--gray-rule); } .faq-item { border-bottom: 1px solid var(--gray-rule); overflow: hidden; } .faq-q-btn { display: flex; justify-content: space-between; align-items: center; padding: 22px 0; cursor: pointer; background: none; border: none; width: 100%; text-align: left; gap: 20px; transition: padding-left 0.2s; } .faq-q-btn:hover { padding-left: 8px; } .faq-q-text { font-size: 1rem; font-weight: 500; color: var(--near-black); line-height: 1.4; font-family: var(--serif); font-size: 1.15rem; } .faq-chevron { width: 24px; height: 24px; background: var(--crimson); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.3s; font-size: 0.75rem; color: #fff; font-weight: 700; } .faq-item.open .faq-chevron { transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s; } .faq-item.open .faq-answer { max-height: 400px; } .faq-answer-inner { padding: 0 80px 24px 0; font-size: 0.92rem; color: var(--gray-dark); line-height: 1.85; font-weight: 300; } .hero-inner{ background-size: cover; /* min-height: 550px; */ position: relative; margin-top:24px; } .hero-inner-content{ position: relative; z-index:2; } .hero-inner::before { content: ""; position: absolute; inset: 0; background:#132040; width:50%; } .hero-gradiant2{ background:#132040;padding: 0;} .hero-gradiant2 img{ height: 550px; object-fit: cover; object-position: center; } .hero-gradiant3{ background:#a51c30;padding: 0;} .hero-gradiant3 img{ height: 550px; object-fit: cover; object-position: center; } .hero-mba{ background: url(https://cartfaceprod-uploads.s3.ap-south-1.amazonaws.com/upload-data/tenants/69de7419b31165d858b64e0b/media/mba-hero-2-1778681079665-7b63b5d8.webp) center right no-repeat; } .hero-cs{ background: url(https://cartfaceprod-uploads.s3.ap-south-1.amazonaws.com/upload-data/tenants/69de7419b31165d858b64e0b/media/hero-cs-1778908591598-fc047060.webp) center right no-repeat; background-size: contain; } .hero-bca{ background: url(https://cartfaceprod-uploads.s3.ap-south-1.amazonaws.com/upload-data/tenants/69de7419b31165d858b64e0b/media/computer-science-1778829755048-753b88d5.webp) center right no-repeat; background-size: cover; } .hero-electronics{ background: url(https://nova-care-upload.s3.ap-south-1.amazonaws.com/upload-data/tenants/69de7419b31165d858b64e0b/media/electronics-and-communcation-1777964358443-eafe864f.webp) center right no-repeat; } .hero-electrical{ background: url(https://nova-care-upload.s3.ap-south-1.amazonaws.com/upload-data/tenants/69de7419b31165d858b64e0b/media/electrical---electronics-1777964453965-60329b2b.webp) center right no-repeat; } .hero-civil{ background: url(https://nova-care-upload.s3.ap-south-1.amazonaws.com/upload-data/tenants/69de7419b31165d858b64e0b/media/civil-engineering-1777964717756-a8f1f0e6.webp) bottom left no-repeat; background-size:cover; } .hero-business{ background: url(https://cartfaceprod-uploads.s3.ap-south-1.amazonaws.com/upload-data/tenants/69de7419b31165d858b64e0b/media/chatgpt-image-may-12--2026--03-01-55-pm--1--1778842490753-29137312.webp) center right no-repeat; background-size: contain; } .hero-optometry{ background: url(https://cartfaceprod-uploads.s3.ap-south-1.amazonaws.com/upload-data/tenants/69de7419b31165d858b64e0b/media/optometry-img-1778844602017-e541f1e5.webp) center right no-repeat; background-size: cover; } .hero-hospital-management{ background: url(https://cartfaceprod-uploads.s3.ap-south-1.amazonaws.com/upload-data/tenants/69de7419b31165d858b64e0b/media/hospital-hero-1778847688355-c3220272.webp) right center no-repeat; background-size: contain; } .hero-hospitality{ background: url(https://cartfaceprod-uploads.s3.ap-south-1.amazonaws.com/upload-data/tenants/69de7419b31165d858b64e0b/media/hotel-management-hero-1778909027840-1fa3616f.webp) center right no-repeat; } .section-body{ max-width: 600px; } /* step layout */ .admission-steps{ display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 60px; position: relative; gap: 20px; } .step-item{ text-align: center; } /* circle (custom — not possible with your utilities) */ .step-circle{ width: 56px; height: 56px; background:#FFF; font-size:24px; padding-top:4px; border: 2px solid var(--accent); border-radius: 50%; margin: 0 auto 15px; font-family: var(--font-heading); font-weight: 700; color: var(--accent); } /* connecting line */ .admission-steps::before{ content: ''; position: absolute; top: 28px; left: 10%; right: 10%; height: 2px; background: #ddd; z-index: -1; } .reverse{background-color: transparent!important; color: #fff!important} header nav div.relative div.relative {padding: 5px 0; border-top: 1px solid #ddd} header nav div.relative div.relative button svg{display: none} header nav div.relative div.relative button{display: block; position: relative} header nav div.relative div.relative button:after{display: inline-block; font-family: bootstrap-icons !important; font-style: normal; font-weight: normal !important; font-variant: normal; text-transform: none; line-height: 1; vertical-align: -.125em; -webkit-font-smoothing: antialiased; position: absolute; content: '\f285'; top: 50%; right: 30px; transform: translateY(-50%); opacity: 0.5; transition: ease-in-out 0.2s;} header nav div.relative div.relative button:hover:after{ right: 10px; opacity: 1; color: var(--secondary2) } .bg-cream{background-color: #fdf8ef!important} .director-page{} .line{display: inline-block; width: 100px; height: 3px; background: var(--secondary); margin: 0 auto} .director-page .wrapper{background: #fff; box-shadow: 0 20px 60px rgba(10,31,60,0.12); border-radius: 15px; overflow: hidden} .director-page .director-img{background: var(--primary2); height: 100%; padding: 25px; } .director-page .director-img img{border-radius: 10px 10px 0 0;} .director-img-content{padding: 20px; border-radius: 0 0 10px 10px;background-color: #fdf8ef!important; text-align: center} .director-img-content h5{margin-bottom: 10px; color: var(--primary); font-weight: 600!important} .director-img-content p{margin-bottom: 5px; color: var(--gray); font-size: 15px;} .director-img-content p.desig{margin-bottom: 5px; color: var(--secondary); font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 2px;} .director-content{padding: 40px 40px 40px 20px;} .director-content blockquote{position: relative; padding-left: 20px; border-left: 3px solid var(--secondary)} .director-content blockquote p{font-size: 14px; text-transform: uppercase; letter-spacing: 1px;} .director-content blockquote h5{color: var(--primary)!important; font-style: italic; margin-top: 40px;} .director-content blockquote i{font-size: 36px; font-size: 36px; position: absolute; left: -10px; top: -50px; color: #999;} .rec-logo{ width:250px; margin-bottom:20px; } .rec-logo img{ width: 100%; height: 120px; object-fit: contain; } /* responsive */ @media(max-width:991px){ .admission-steps{ grid-template-columns: repeat(2,1fr); } .admission-steps::before{ display:none; } .common-hero > .container-fluid{padding:0!important} } @media(max-width:576px){ .admission-steps{ grid-template-columns: 1fr; } } /* fee rows (clean alignment) */ .fee-row{ display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #eee; font-size: 14px; } .fee-row span{ color: var(--gray); } /* note box */ .fee-note{ padding: 12px; background: rgba(212,175,55,0.1); border: 1px solid rgba(212,175,55,0.2); border-radius: 6px; font-size: 13px; color: var(--gray); } /* scholarship list */ .scholarship-list{ display: flex; flex-direction: column; gap: 15px; } /* card style (light custom only) */ .scholarship-item{ display: flex; gap: 12px; padding: 14px; background: #fff; border: 1px solid #eee; border-radius: 6px; transition: 0.3s; } .scholarship-item:hover{ transform: translateY(-4px); box-shadow: 0 10px 25px rgba(0,0,0,0.08); } /* icon */ .scholarship-item .icon{ font-size: 20px; } /* grid (not possible via bootstrap cleanly) */ .curriculum-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; } /* header */ .curriculum-header{ padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; } /* rows */ .curr-row{ font-size: 14px; padding: 6px 0; display: flex; align-items: center; gap: 8px; } /* responsive */ @media(max-width:991px){ .curriculum-grid{ grid-template-columns: 1fr 1fr; } } @media(max-width:576px){ .curriculum-grid{ grid-template-columns: 1fr; } } /* stat boxes */ .stat-box{ background: #f8f9fa; border: 1px solid #eee; padding: 20px; border-radius: 8px; text-align: center; transition: 0.3s; } .stat-number{ font-size: 28px; font-weight: 700; color: var(--primary); } .stat-label{ font-size: 12px; color: var(--gray); margin-top: 6px; } /* chips */ .chip{ padding: 6px 14px; border-radius: 50px; font-size: 12px; border: 1px solid #ddd; background: #fff; transition: 0.3s; } .chip:hover{ background: var(--primary); color: #fff; border-color: var(--primary); } /* left cards */ .elig-card{ background: #fff; border: 1px solid #ccc; padding: 18px; transition: 0.3s; } /* right requirements */ .req-item{ display: flex; gap: 10px; align-items: flex-start; font-size: 14px; } /* note */ .elig-note{ padding: 14px; background: rgba(212,175,55,0.1); border: 1px solid rgba(212,175,55,0.2); border-radius: 6px; font-size: 13px; color: var(--gray); font-style: italic; } /* requirement item (this was missing properly) */ .req-item-box{ display: flex; gap: 12px; align-items: flex-start; padding: 14px; background: #f8f9fa; border-left: 3px solid var(--primary); border-radius: 6px; } /* icon */ .req-icon{ font-size: 18px; margin-top: 2px; } /* text */ .req-text{ font-size: 14px; color: var(--gray); line-height: 1.6; } .hero_admission{ background-image: url(); background-color: linear-gradient(90deg, #0d0054 0%, rgba(13, 0, 84, 0.95) 20%, rgba(13, 0, 84, 0.7) 40%, rgba(13, 0, 84, 0.4) 60%, rgba(13, 0, 84, 0.15) 75%, rgba(13, 0, 84, 0) 90%); padding: 50px 0; } .bgHeight .card{ height:100%; } /*mobile*/ .container.mx-auto.px-4, .blog-list-home .container.px-6, .container.mx-auto.px-4 .max-w-7xl.mx-auto{ width: 100%!important; max-width: 100%!important; } @media screen and (min-width: 768px){ .container-fluid,.container{ padding-left: 50px!important; padding-right: 50px!important; width: 100%!important; max-width: 100%!important; } header div.px-4, .container.mx-auto.px-4, .blog-list-home .container.px-6, .container{ padding-left: 50px!important; padding-right: 50px!important; } } @media screen and (min-width: 992px){ } @media screen and (min-width: 1200px){ .container-fluid, .container{ padding-left: 80px!important; padding-right: 80px!important; } header div.px-4, .container.mx-auto.px-4{ padding-left: 80px!important; padding-right: 80px!important; } } @media screen and (min-width: 1400px){ } /*tablet*/ @media screen and (max-width: 1024px){ h1{ font-size: 50px!important; } .h2{ font-size: 40px!important; } h2,.h3{ font-size: 36px!important; } h3,.h4,h2.text-3xl{ font-size: 30px!important; } .hero-inner::before { width:100%; } } @media screen and (max-width: 860px){ } /*mobile*/ @media screen and (max-width: 767px){ .container.mx-auto.px-4{ padding-left: 15px!important; padding-right: 15px!important; } h1{ font-size: 40px!important; } .h2{ font-size: 36px!important; } h2,.h3{ font-size: 36px!important; } .lead-lg{ font-size: 18px; line-height:1.5; } .lead{ font-size: 17px!important; line-height:1.5; } .fs-18{ font-size: 18px!important; } .fs-20{ font-size: 20px!important; } .fs-24{ font-size: 22px!important; } .fs-30{ font-size: 24px!important; } .fs-32{ font-size: 28px!important; } .fs-36{ font-size: 30px!important; } .fs-40{ font-size: 32px!important; } .btn{ font-size: 16px; letter-spacing: 0; font-weight: 400; padding: 10px 20px; } .btn.btn-sm{ font-size: 14px; padding: 8px 16px; } } @media screen and (max-width: 575px){ .list-dot { margin-left: 15px } .text-center.mb-12 h2.text-2xl{padding-left: 20px;} section.py-10{ padding-bottom: 70px!important } .director-content, .director-page .director-img { padding: 20px; } {font-size: 13px;} } @media screen and (max-width: 375px){ } .w-full .border-2 {border: 0; margin: 0!important; padding: 0!important} .w-full .border-2 h3{font-size: 16px!important; font-family: 'Poppins'; font-weight: 500!important; margin: 0!important} .w-full .border-2 button.py-5{padding-top: 18px !important; padding-bottom: 18px !important; border-top: 1px solid #e5e7eb;} .container.mx-auto.px-4 .max-w-3xl.mx-auto{ max-width: 775px!important} .container.mx-auto.px-4 .w-full.space-y-4{border-bottom: 1px solid #e5e7eb;} .w-full .border-2 button .font-semibold{font-weight: 500!important; color: #212529} .w-full .border-2 .text-muted-foreground.pb-5.leading-relaxed{padding: 0 0 15px 0!important; font-size: 15px; color: #fffff} /*for infructure page*/ .cursor-default div.bg-card.text-card-foreground{position: relative} .cursor-default div.bg-card.text-card-foreground div.space-y-4{position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 0 !important; text-align: center; height: auto !important; background: rgba(0, 0, 0, 0.3); transition: ease-in-out 0.2s} .cursor-default div.bg-card.text-card-foreground:hover div.space-y-4{position: absolute; background: rgba(0, 0, 0, 0.6);} .cursor-default div.bg-card.text-card-foreground div.space-y-4 div{gap: 0!important; height: auto!important; padding: 0!important} .cursor-default div.bg-card.text-card-foreground div.space-y-4 div .font-semibold{font-weight: normal!important; font-size: 18px;} .rad5{border-radius: 5px;} /* for aicte page*/ a.feature-item{border-radius: 8px;} a.feature-item h5{margin: 0!important; line-height: 1.5!important} .dark,.black,.blk{color: #000!important} h2.text-3xl{font-size: 38px!important} .small-heading-border{ display: inline-block; font-size: 14px; text-transform: uppercase; color: #a51c30; margin-bottom: 15px!important; border: 1px solid #a51c30; border-radius: 30px; padding: 6px 15px; } .text-muted-foreground{color: #000!important} a.text-muted-foreground:hover{text-decoration: underline!important} .text-center.mb-12 h2.text-3xl{text-align: left} .rad10{border-radius: 10px!important} footer a{border: 0!important} footer a img{width: 24px!important; height: 24px!important} footer .flex.gap-4{gap: 10px!important} .flex.h-full.flex-col.gap-5{gap: 10px!important} .ffpoppins-bold {font-family: 'Poppins'!important; font-weight: bold!important} footer nav a:hover{text-decoration: underline!important; color: #fff!important} footer h3.text-2xl{font-size: 38px!important} .mb-12.text-center.max-w-md.mx-auto{max-width: 600px!important} .common-hero{} .hero-gradiant{ background: linear-gradient( to bottom, var(--gold2) 0%, var(--gold) 100% ); } .small-heading-pills{ display: inline-block; font-size: 13px; color: #333; margin-bottom: 12px!important; border: 1px solid #ccc; border-radius: 30px; padding: 5px 12px; max-width: fit-content; } .card-hover:hover{box-shadow: none!important; transform: none!important} @media screen and (max-width: 1024px){ .about-grid { display: flex !important; flex-direction: column; } .about-grid img { max-width:100% !important; width:100%; } .curriculum-grid{ grid-template-columns: repeat(2, 1fr) !important; } .admission-steps { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; } .hero-gradiant2 img{ height:auto; } .hero-gradiant3 img{ height:auto; } .abtImg{ width:100%; } } @media screen and (max-width: 767px){ .about-grid{ padding-left:12px !important; padding-right:12px !important; } .curriculum-grid{ grid-template-columns: repeat(1, 1fr) !important; } .admission-steps { grid-template-columns: repeat(1, 1fr) !important; gap: 20px !important; } .about-wrap{ padding:0 12px !important; } .purposeDiv{ padding-left:12px !important; padding-right:12px !important; } .timeline-section{ padding-left:12px !important; padding-right:12px !important; } .stars-section{ padding-left:12px !important; padding-right:12px !important; } .rec-logo{ width:100%; } .rec-logo img{ height:auto; } } .container-policies{padding: 0 20px; margin: 0 auto; width: 100%; max-width: 1000px;} .banner-cms{background-image: url(https://cartfaceprod-uploads.s3.ap-south-1.amazonaws.com/upload-data/tenants/69de7419b31165d858b64e0b/media/bg-blue-gradiant-1779815088533-c9fae728.webp); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; height: 100px; color: #fff; font-size: 24px; margin-bottom: 30px; position: relative } .banner-cms h4{text-align: center; color: #fff; position: relative; z-index: 5} .banner-cms:before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5) } .chip.chip-reverse { background: var(--primary); border-color: #999; color: #fff; } .bg-warning{background-color: #d3d3d3!important} .display-6{font-size: 36px; font-weight: 600} @media(max-width:768px){ .container-policies p{ font-size: 16px; } }18:["$","$L14",null,{"children":["$","$L2d",null,{"children":["$","$L2f",null,{"tenantSlug":"pailan-college","children":[["",["$","style",null,{"id":"cf-theme-vars","dangerouslySetInnerHTML":{"__html":"$30"}}],["$","style",null,{"dangerouslySetInnerHTML":{"__html":"$31"}}],"$L32","$L33",false,"","$L34","$L35","$L36"],"$L37","$L38","$L39"]}]}]}] 3a:I[479520,["$2","$3","$4","$5","$7","$8","$9","$a","$b","$c","$d","$e","$f","$10","$11","$12","$13"],""] 3d:I[121358,["$2","$3","$4","$5","$7","$8","$9","$a","$b","$c","$d","$e","$f","$10","$11","$12","$13"],"default"] 44:I[8395,["$2","$3","$4","$5","$7","$8","$9","$a","$b","$c","$d","$e","$f","$10","$11","$12","$13"],"default"] 45:I[756340,["$2","$3","$4","$5","$7","$8","$9","$a","$b","$c","$d","$e","$f","$10","$11","$12","$13"],"default"] 46:I[168654,["$2","$3","$4","$5","$7","$8","$9","$a","$b","$c","$d","$e","$f","$10","$11","$12","$13"],"default"] 47:I[407471,["$2","$3","$4","$5","$7","$8","$9","$a","$b","$c","$d","$e","$f","$10","$11","$12","$13"],"default"] 48:I[406183,["$2","$3","$4","$5","$7","$8","$9","$a","$b","$c","$d","$e","$f","$10","$11","$12","$13"],"default"] 3b:T3abd,// // window.addEventListener("load", function () { // const PX_PER_SECOND = 90; // document.querySelectorAll(".ticker").forEach((ticker) => { // const wrap = ticker.querySelector(".ticker-wrap"); // const track = ticker.querySelector(".ticker-track"); // const source = ticker.querySelector(".ticker-source"); // if (!wrap || !track || !source) return; // function buildTicker() { // // remove old clones // track.querySelectorAll(".ticker-clone").forEach(el => el.remove()); // const sourceWidth = source.scrollWidth; // if (!sourceWidth) return; // let totalWidth = sourceWidth; // // duplicate enough times // while (totalWidth < wrap.offsetWidth * 2) { // const clone = source.cloneNode(true); // clone.classList.remove("ticker-source"); // clone.classList.add("ticker-clone"); // track.appendChild(clone); // totalWidth += sourceWidth; // } // // set css vars // track.style.setProperty( // "--ticker-distance", // sourceWidth + "px" // ); // track.style.setProperty( // "--ticker-duration", // (sourceWidth / PX_PER_SECOND) + "s" // ); // // restart animation // track.style.animation = "none"; // void track.offsetWidth; // track.style.animation = // "ticker-scroll var(--ticker-duration) linear infinite"; // } // buildTicker(); // let resizeTimer; // window.addEventListener("resize", () => { // clearTimeout(resizeTimer); // resizeTimer = setTimeout(buildTicker, 150); // }); // }); // }); // function toggleFaq(btn) { const content = btn.nextElementSibling; const icon = btn.querySelector("span:last-child"); // close others document.querySelectorAll(".space-y-4 > div").forEach(item => { const c = item.querySelector("div"); const i = item.querySelector("button span:last-child"); if (c !== content) { c.classList.add("hidden"); if (i) i.textContent = "+"; } }); // toggle current content.classList.toggle("hidden"); icon.textContent = content.classList.contains("hidden") ? "+" : "−"; } (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-MR6HRSBR');