/* ========================================================================== PARA COMMANDO PHYSICAL ACADEMY PALAMPUR Motion + composition layer -------------------------------------------------------------------------- The brief here is restraint. A parent deciding where to send their son is not persuaded by movement; they are persuaded by a page that behaves predictably and looks looked-after. So: - Entrances are short, small and one-shot. Nothing slides a long distance, nothing bounces, nothing loops in the corner of the eye. - Only transform, opacity and clip-path animate, so it stays smooth on a mid-range Android phone. - Content is fully visible with JavaScript off; the `.js` class on is what arms the hidden starting states. - Everything surrenders under prefers-reduced-motion (see the end). ========================================================================== */ /* ---------------------------------------------------------- 1. Page entry */ /* Deliberately none. Hiding until a script or animation runs is a single point of failure for the whole page, and it delays the largest contentful paint. The page renders immediately; only sub-elements animate. */ /* --------------------------------------------- 2. Masked line reveal (type) */ /* Used only on the two or three headlines that carry the page. */ .ln { display: block; overflow: hidden; padding-bottom: 0.06em; } .ln__i { display: block; } .js .ln__i { transform: translateY(102%); transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: var(--ln-delay, 0ms); } .js .is-in .ln__i, .js .ln.is-in .ln__i { transform: none; } /* --------------------------------------------------- 3. Standard entrances */ .js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: var(--reveal-delay, 0ms); } .js [data-reveal].is-in { opacity: 1; transform: none; } /* A rule that settles in rather than appearing */ .js [data-draw] { transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: var(--reveal-delay, 0ms); } .js [data-draw].is-in { transform: none; } /* Photographs settle up from a soft mask - quieter than a fade */ .js [data-clip] { clip-path: inset(0 0 24% 0); opacity: 0; transition: clip-path 0.85s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.7s ease-out; transition-delay: var(--reveal-delay, 0ms); } .js [data-clip].is-in { clip-path: inset(0 0 0 0); opacity: 1; } /* ------------------------------------------------------- 4. Header states */ .header { transition: box-shadow 0.3s var(--ease), background-color 0.3s var(--ease); } .header.is-scrolled { box-shadow: 0 1px 0 rgba(26, 31, 20, 0.10), 0 8px 24px -20px rgba(26, 31, 20, 0.45); } /* ---------------------------------------------------- 5. Quiet interactions */ .btn { transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease); } .btn:active { transform: translateY(1px); } .card--hover, .course-card, .prog, .contact-card { transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease); } .prog__icon { transition: transform 0.35s var(--ease); } .prog:hover .prog__icon { transform: translateY(-2px); } .figure img, .hero__frame img, .gallery__item img { transition: transform 0.7s var(--ease); } .gallery__item:hover img { transform: scale(1.02); } /* -------------------------------------------------------- 6. Measure motif */ /* Ticks along a rule. It refers to the standards a candidate is measured against, and replaces a generic decorative divider. Used sparingly. */ .measure { height: 12px; border-top: 1px solid var(--line-strong); background-image: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 14px); background-size: 14px 6px; background-repeat: repeat-x; } /* ------------------------------------------------------ 7. Forces strip */ /* A static, evenly ruled list of what the academy prepares for. Deliberately not a scrolling marquee - a moving strip reads as advertising. */ .forces { border-block: 1px solid var(--line); background: var(--bg-raised); } .forces__list { list-style: none; margin: 0; padding: var(--s-4) 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-2) 0; } .forces__list li { margin: 0; padding-inline: clamp(12px, 2vw, 22px); border-right: 1px solid var(--line); font-family: var(--font-display); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--fg-2); line-height: 1.9; } .forces__list li:last-child { border-right: 0; } /* --------------------------------------------- 8. Sticky method column */ .sticky-col { position: sticky; top: calc(var(--header-h) + var(--s-6)); align-self: start; } .method { border-top: 1px solid var(--line-strong); } .method__item { display: grid; grid-template-columns: minmax(0, 62px) minmax(0, 1fr); gap: var(--s-3) var(--s-5); padding: clamp(24px, 3vw, 38px) 0; border-bottom: 1px solid var(--line); align-items: start; } .method__num { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; line-height: 1.6; letter-spacing: 0.1em; color: var(--army); } .method__title { margin: 0 0 var(--s-2); font-size: var(--t-h4); font-family: var(--font-display); font-weight: 600; letter-spacing: 0; } .method__text { color: var(--fg-2); font-size: var(--t-sm); margin: 0; max-width: 58ch; } /* -------------------------------------------------- 9. Hero composition */ .hero { position: relative; padding-top: calc(var(--header-h) + clamp(34px, 4.5vw, 64px)); padding-bottom: 0; text-align: left; background: var(--bg); } .hero__grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); gap: clamp(32px, 4.5vw, 72px); align-items: center; } .hero__eyebrow { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); } .hero__eyebrow .kicker { margin: 0; } .hero__eyebrow-rule { flex: 1; height: 1px; background: var(--line); max-width: 110px; } .hero__title { font-size: var(--t-display); font-weight: 600; letter-spacing: -0.012em; line-height: 1.08; margin: 0 0 var(--s-5); max-width: 15ch; text-wrap: initial; } .hero__title .accent { color: var(--army); } .hero__lead { max-width: 48ch; margin: 0 0 var(--s-6); } .hero .btn-row { justify-content: flex-start; } .hero__panel { position: relative; } .hero__frame { position: relative; border: 1px solid var(--line); padding: 10px; background: var(--card); margin: 0; } .hero__frame img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; display: block; } /* A small, quiet rating plaque set into the frame's lower-left corner */ .plaque { position: absolute; left: calc(var(--s-5) * -1); bottom: var(--s-5); background: #FFFFFF; color: var(--fg); padding: var(--s-4) var(--s-5); border: 1px solid var(--line-strong); border-top: 2px solid var(--army); max-width: 226px; } .plaque__stars { display: flex; gap: 2px; color: var(--gold); margin-bottom: 6px; } .plaque__stars svg { width: 12px; height: 12px; fill: currentColor; stroke: none; } .plaque__value { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: 0.01em; line-height: 1.2; margin: 0; } .plaque__label { font-size: 0.75rem; color: var(--fg-3); margin: 4px 0 0; line-height: 1.45; } /* Hero ledger: the four facts, set as a measured record */ .hero__ledger { margin-top: clamp(36px, 4.5vw, 64px); border-top: 1px solid var(--line-strong); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .ledger-item { padding: var(--s-5) var(--s-5) var(--s-6) 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; } .ledger-item:last-child { border-right: 0; } .ledger-item + .ledger-item { padding-left: var(--s-5); } .ledger-item__key { font-family: var(--font-display); font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--army); } .ledger-item__val { font-size: var(--t-xs); color: var(--fg-2); line-height: 1.6; } /* --------------------------------------------- 10. Asymmetric section head */ .head { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: var(--s-4) clamp(32px, 5vw, 76px); align-items: end; margin-bottom: clamp(34px, 4vw, 58px); } .head__index { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-4); } .head__index .kicker { margin: 0; } .head__index-rule { flex: 1; height: 1px; background: var(--line); } .head__title { margin: 0; font-size: var(--t-h2); } .head__aside { padding-bottom: 5px; } .head__aside .lead { margin: 0; } .head--stack { grid-template-columns: 1fr; } /* ------------------------------------------------------ 11. Feature rows */ .feature-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(28px, 4.5vw, 68px); align-items: center; padding-block: clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--line); } .feature-row:last-child { border-bottom: 0; padding-bottom: 0; } .feature-row--flip > .feature-row__media { order: -1; } .feature-row__media { position: relative; } .feature-row__tag { font-family: var(--font-display); font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--army); display: block; margin-bottom: var(--s-3); } /* ---------------------------------------------------- 12. Reduced motion */ @media (prefers-reduced-motion: reduce) { .js .ln__i { transform: none; transition: none; } .js [data-reveal] { opacity: 1; transform: none; transition: none; } .js [data-draw] { transform: none; transition: none; } .js [data-clip] { clip-path: none; opacity: 1; transition: none; } .figure img, .hero__frame img, .gallery__item img { transition: none; } .gallery__item:hover img { transform: none; } .btn:active { transform: none; } } /* ========================================================================== 13. COURSE BANNER - continuous rotating strip -------------------------------------------------------------------------- A slim band of programme names that travels steadily across the page. Two identical groups sit side by side and the track is translated by exactly -50%, so the loop is seamless with no jump. It pauses when a reader hovers or focuses it, and stops entirely for reduced motion. ========================================================================== */ .banner { --banner-duration: 42s; position: relative; overflow: hidden; background: var(--army-deep); color: #FFFFFF; border-block: 1px solid var(--army-deep); padding-block: var(--s-4); } .banner__track { display: flex; width: max-content; animation: banner-scroll var(--banner-duration) linear infinite; animation-play-state: var(--banner-state, running); } .banner:hover, .banner:focus-within { --banner-state: paused; } .banner__group { display: flex; align-items: center; flex: none; } .banner__item { display: inline-flex; align-items: center; gap: var(--s-4); padding-inline: clamp(16px, 2.4vw, 30px); font-family: var(--font-display); font-size: clamp(0.9rem, 0.82rem + 0.4vw, 1.1rem); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #FFFFFF; text-decoration: none; white-space: nowrap; transition: color 0.2s var(--ease); } .banner__item:hover { color: var(--gold-soft); } .banner__item::after { content: ""; width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); flex: none; } /* soften the two ends so items enter and leave rather than being cut */ .banner::before, .banner::after { content: ""; position: absolute; top: 0; bottom: 0; width: clamp(28px, 7vw, 90px); z-index: 2; pointer-events: none; } .banner::before { left: 0; background: linear-gradient(90deg, var(--army-deep), transparent); } .banner::after { right: 0; background: linear-gradient(270deg, var(--army-deep), transparent); } @keyframes banner-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } /* ========================================================================== 14. ROTATING WORD -------------------------------------------------------------------------- One line of the hero holds a word that changes: Army, Agniveer, BSF... The height is fixed to the line box so nothing below it moves as words swap. ========================================================================== */ .rotator { display: inline-flex; flex-direction: column; overflow: hidden; height: 1.15em; vertical-align: bottom; position: relative; } .rotator__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; transition: transform 0.62s cubic-bezier(0.65, 0, 0.35, 1); transform: translateY(calc(var(--rot-index, 0) * -1.15em)); } .rotator__list li { height: 1.15em; line-height: 1.15em; margin: 0; white-space: nowrap; color: var(--army); font-weight: 600; } /* ========================================================================== 15. HOVER + FOCUS DETAIL ========================================================================== */ /* Buttons fill from the left rather than simply changing colour */ .btn { position: relative; overflow: hidden; isolation: isolate; } .btn > * { position: relative; z-index: 1; } .btn::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--btn-sweep, transparent); transform: scaleX(0); transform-origin: left center; transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1); } .btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); } .btn--primary { --btn-sweep: var(--accent-hover); } .btn--outline { --btn-sweep: var(--army-wash); } .btn--solid { --btn-sweep: var(--army-wash); } /* Cards lift a little and take a coloured edge */ .card--hover, .course-card, .contact-card { transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.25s var(--ease), box-shadow 0.32s var(--ease), background-color 0.25s var(--ease); } .card--hover:hover, .course-card:hover, .contact-card:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -26px rgba(27, 30, 23, 0.55); } /* Programme tiles: a corner tick and a rising icon */ .prog { position: relative; overflow: hidden; } .prog::after { content: ""; position: absolute; top: 0; right: 0; border-top: 15px solid var(--army); border-left: 15px solid transparent; opacity: 0; transform: translate(4px, -4px); transition: opacity 0.28s var(--ease), transform 0.28s var(--ease); } .prog:hover::after, .prog:focus-visible::after { opacity: 1; transform: none; } /* Photographs lift their subject slightly under the frame */ .figure { overflow: hidden; } .figure img, .hero__frame img { transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1); } .figure:hover img { transform: scale(1.035); } /* Gallery caption rises into view */ .gallery__cap { transform: translateY(6px); opacity: 0.92; transition: transform 0.35s var(--ease), opacity 0.35s var(--ease); } .gallery__item:hover .gallery__cap { transform: none; opacity: 1; } /* The small-caps link grows its rule from the left */ .link-arrow { position: relative; border-bottom-color: transparent; } .link-arrow::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1); } .link-arrow:hover::after, .link-arrow:focus-visible::after { transform: scaleX(1); } /* Accordion rows warm up on hover */ .acc-item { transition: background-color 0.24s var(--ease); } .acc-item:hover { background: var(--army-wash); } .acc-btn { padding-inline: var(--s-3); margin-inline: calc(var(--s-3) * -1); } /* Rows in the ledger and method mark themselves as you pass */ .ledger-item, .method__item { transition: border-color 0.3s var(--ease); } @media (prefers-reduced-motion: reduce) { .banner__track { animation: none; transform: none; } .banner::before, .banner::after { display: none; } .rotator { height: auto; } .rotator__list { transition: none; transform: none; } .rotator__list li:not(:first-child) { display: none; } .btn::before { display: none; } .card--hover:hover, .course-card:hover, .contact-card:hover { transform: none; box-shadow: none; } .figure:hover img { transform: none; } .prog::after { transition: none; } .link-arrow::after { transition: none; } .link-arrow { border-bottom-color: currentColor; } } /* ========================================================================== 16. OPENING SEQUENCE (home page only) -------------------------------------------------------------------------- A short curtain: the crest draws, the wordmark rises, a gold rule opens, and the panel lifts away. About 1.6 seconds, once per browsing session, and any tap, key or scroll dismisses it immediately. It is built so it CANNOT strand a visitor: - The page itself is never hidden. This is a panel laid over a fully rendered page, so if anything here fails the content is already there. - The lift is a CSS animation with `forwards`, so it completes even if the JavaScript never runs. JavaScript only adds the once-per-session skip. - It is display:none without the `js` class, so a visitor with JavaScript off never sees it at all. - main.js force-removes it after 3s as a last resort. ========================================================================== */ .intro { display: none; } .js .intro { display: grid; place-items: center; position: fixed; inset: 0; z-index: 300; background: var(--army-deep); animation: intro-lift 0.6s cubic-bezier(0.76, 0, 0.24, 1) 1.02s forwards; } /* Seen already this session, or the visitor asked for less motion */ .js.intro-seen .intro { display: none; } @keyframes intro-lift { to { transform: translateY(-101%); visibility: hidden; } } .intro__inner { text-align: center; padding: var(--s-5); } .intro__crest { width: clamp(64px, 16vw, 88px); height: clamp(64px, 16vw, 88px); margin: 0 auto var(--s-5); opacity: 0; animation: intro-crest 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) 0.02s forwards; } @keyframes intro-crest { from { opacity: 0.25; transform: scale(0.92); } to { opacity: 1; transform: none; } } /* the ring draws itself around the mark */ .intro__ring { stroke-dasharray: 107; stroke-dashoffset: 107; animation: intro-ring 0.66s cubic-bezier(0.22, 0.61, 0.36, 1) 0.04s forwards; } @keyframes intro-ring { to { stroke-dashoffset: 0; } } .intro__name { overflow: hidden; } .intro__name span { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.15rem, 0.95rem + 1.5vw, 1.9rem); letter-spacing: 0.16em; text-transform: uppercase; color: #FFFFFF; line-height: 1.25; transform: translateY(105%); animation: intro-rise 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.26s forwards; } .intro__sub { overflow: hidden; margin-top: 4px; } .intro__sub span { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(0.62rem, 0.55rem + 0.4vw, 0.78rem); letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold-soft); transform: translateY(105%); animation: intro-rise 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.36s forwards; } @keyframes intro-rise { to { transform: none; } } .intro__rule { width: min(210px, 46vw); height: 1px; background: var(--gold); margin: var(--s-5) auto 0; transform: scaleX(0); animation: intro-rule 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.55s forwards; } @keyframes intro-rule { to { transform: none; } } @media (prefers-reduced-motion: reduce) { .js .intro { display: none; } }